ketcher-react 2.6.4 → 2.7.0-rc.3

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, KetcherAsyncEvents, ElementColor, formatProperties, Vec2, FunctionalGroup, Fragment as Fragment$1, OperationType, fromAtomsAttrs, 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, 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, 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, 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';
@@ -40,7 +40,7 @@ import ReactDOM from 'react-dom';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { combineReducers, createStore as createStore$1, applyMiddleware } from 'redux';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import 'redux-logger';
+import { logger } from 'redux-logger';
 import thunk from 'redux-thunk';
 import { throttle as throttle$1, inRange, isEqual as isEqual$1, range as range$1 } from 'lodash';
 import useResizeObserver from 'use-resize-observer/polyfilled';
@@ -49,6 +49,7 @@ import styled from '@emotion/styled';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import { IconButton as IconButton$1, Collapse, ClickAwayListener, Button as Button$1, Popover, createTheme, ThemeProvider } from '@mui/material';
 import * as KN from 'w3c-keyname';
+import { isIE } from 'react-device-detect';
 import { ContextMenu, MenuItem, ContextMenuTrigger, hideMenu } from 'react-contextmenu';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
@@ -112,9 +113,18 @@ var atomCuts = {
   P: 'p',
   F: 'f',
   Cl: 'Shift+c',
-  Br: 'Shift+b',
+  Br: 'b',
   I: 'i',
-  A: 'a'
+  A: 'a',
+  Q: 'q',
+  R: 'r',
+  K: 'k',
+  M: 'm',
+  Si: 'Shift+s',
+  Na: 'Shift+n',
+  X: 'x',
+  D: 'd',
+  B: 'Shift+b'
 };
 var atoms = Object.keys(atomCuts).reduce(function (res, label) {
   res["atom-".concat(label.toLowerCase())] = {
@@ -252,7 +262,7 @@ var debugObj = {
   }
 };
 
-var classes$N = {"cliparea":"cliparea-module_cliparea__GdPrN"};
+var classes$O = {"cliparea":"cliparea-module_cliparea__GdPrN"};
 
 function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); 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$c() { 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; } }
@@ -326,7 +336,7 @@ var ClipArea = function (_Component) {
     value: function render() {
       return jsx("textarea", {
         ref: this.textAreaRef,
-        className: clsx('cliparea', classes$N.cliparea),
+        className: clsx('cliparea', classes$O.cliparea),
         contentEditable: true,
         autoFocus: true
         ,
@@ -356,6 +366,7 @@ function _copy(cb, data) {
         cb.setData(fmt, data[fmt]);
       });
     } catch (ex) {
+      console.info("Could not write exact type ".concat(curFmt));
     }
   }
 }
@@ -386,8 +397,8 @@ function exec(action) {
   return enabled;
 }
 
-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$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 editor = {
   resetToSelect: {
     title: 'Reset to Select Tool',
@@ -635,7 +646,7 @@ var optionsSchema = {
   title: 'Settings',
   type: 'object',
   required: [],
-  properties: _objectSpread$12(_objectSpread$12(_objectSpread$12(_objectSpread$12(_objectSpread$12({}, editor), render), server), debug), miew)
+  properties: _objectSpread$15(_objectSpread$15(_objectSpread$15(_objectSpread$15(_objectSpread$15({}, editor), render), server), debug), miew)
 };
 function getDefaultOptions() {
   if (!optionsSchema.properties) return {};
@@ -681,6 +692,7 @@ var storage = {
     try {
       item = JSON.parse(localStorage.getItem(key));
     } catch (ex) {
+      console.info('LocalStorage:', ex.name);
     }
     return item;
   },
@@ -690,19 +702,21 @@ var storage = {
       localStorage.setItem(key, JSON.stringify(data));
       isSet = true;
     } catch (ex) {
+      console.info('LocalStorage:', ex.name);
       isSet = false;
     }
     return isSet;
   }
 };
 
-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$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 initOptionsState = {
   app: {
     server: false,
     templates: false,
-    functionalGroups: false
+    functionalGroups: false,
+    saltsAndSolvents: false
   },
   analyse: {
     values: null,
@@ -793,27 +807,27 @@ function optionsReducer() {
   var action = arguments.length > 1 ? arguments[1] : undefined;
   var type = action.type,
       data = action.data;
-  if (type === 'APP_OPTIONS') return _objectSpread$11(_objectSpread$11({}, state), {}, {
-    app: _objectSpread$11(_objectSpread$11({}, state.app), data)
+  if (type === 'APP_OPTIONS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
+    app: _objectSpread$14(_objectSpread$14({}, state.app), data)
   });
-  if (type === 'SAVE_SETTINGS') return _objectSpread$11(_objectSpread$11({}, state), {}, {
+  if (type === 'SAVE_SETTINGS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
     settings: data
   });
-  if (type === 'SAVE_CHECK_OPTS') return _objectSpread$11(_objectSpread$11({}, state), {}, {
+  if (type === 'SAVE_CHECK_OPTS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
     check: data
   });
-  if (type === 'CHANGE_ANALYSE') return _objectSpread$11(_objectSpread$11({}, state), {}, {
-    analyse: _objectSpread$11(_objectSpread$11(_objectSpread$11({}, state.analyse), data), {}, {
+  if (type === 'CHANGE_ANALYSE') return _objectSpread$14(_objectSpread$14({}, state), {}, {
+    analyse: _objectSpread$14(_objectSpread$14(_objectSpread$14({}, state.analyse), data), {}, {
       loading: false
     })
   });
-  if (type === 'ANALYSE_LOADING') return _objectSpread$11(_objectSpread$11({}, state), {}, {
-    analyse: _objectSpread$11(_objectSpread$11({}, state.analyse), {}, {
+  if (type === 'ANALYSE_LOADING') return _objectSpread$14(_objectSpread$14({}, state), {}, {
+    analyse: _objectSpread$14(_objectSpread$14({}, state.analyse), {}, {
       loading: true
     })
   });
-  if (recognizeActions.includes(type)) return _objectSpread$11(_objectSpread$11({}, state), {}, {
-    recognize: _objectSpread$11(_objectSpread$11({}, state.recognize), data)
+  if (recognizeActions.includes(type)) return _objectSpread$14(_objectSpread$14({}, state), {}, {
+    recognize: _objectSpread$14(_objectSpread$14({}, state.recognize), data)
   });
   return state;
 }
@@ -823,6 +837,7 @@ function constant(schema, prop) {
   return desc.constant || desc["enum"][0];
 }
 function mapOf(schema, prop) {
+  console.assert(schema.oneOf);
   return schema.oneOf.reduce(function (res, desc) {
     res[constant(desc, prop)] = desc;
     return res;
@@ -1069,7 +1084,7 @@ var sdataCustomSchema = {
     },
     context: {
       title: 'Context',
-      "enum": ['Fragment', 'Multifragment', 'Bond', 'Atom', 'Group'],
+      "enum": ['Atom', 'Bond', 'Fragment', 'Group', 'Multifragment'],
       "default": 'Fragment'
     },
     fieldName: {
@@ -1103,18 +1118,26 @@ var sdataSchema = Object.keys(sData).reduce(function (acc, title) {
 function firstKeyOf(obj) {
   return Object.keys(obj)[0];
 }
-function getSdataDefault(context, fieldName) {
-  if (!context && !fieldName) return firstKeyOf(sdataSchema);
-  if (!fieldName) return firstKeyOf(sdataSchema[context]);
-  return sdataSchema[context][fieldName] ? sdataSchema[context][fieldName].properties.fieldValue["default"] : '';
-}
-
-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 initSdata = function initSdata() {
-  var context = getSdataDefault();
-  var fieldName = getSdataDefault(context);
-  var fieldValue = getSdataDefault(context, fieldName);
+function getSdataDefault() {
+  var schema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : sdataSchema;
+  var context = arguments.length > 1 ? arguments[1] : undefined;
+  var fieldName = arguments.length > 2 ? arguments[2] : undefined;
+  if (schema.key === 'Custom') {
+    var _schema$properties$co;
+    return (_schema$properties$co = schema.properties[context]) === null || _schema$properties$co === void 0 ? void 0 : _schema$properties$co["default"];
+  }
+  if (!context && !fieldName) return firstKeyOf(schema);
+  if (!fieldName) return firstKeyOf(schema[context]);
+  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; }
+var initSdata = function initSdata(schema) {
+  var isCustomShema = schema.key === 'Custom';
+  var context = isCustomShema ? getSdataDefault(sdataCustomSchema, 'context') : getSdataDefault(sdataSchema);
+  var fieldName = isCustomShema ? getSdataDefault(sdataCustomSchema, 'fieldName') : getSdataDefault(sdataSchema, context);
+  var fieldValue = isCustomShema ? getSdataDefault(sdataCustomSchema, 'fieldValue') : getSdataDefault(sdataSchema, context, fieldName);
   var radiobuttons = 'Absolute';
   return {
     errors: {},
@@ -1130,7 +1153,7 @@ var initSdata = function initSdata() {
 };
 function sdataReducer(state, action) {
   if (action.data.result.init) {
-    return correctErrors(_objectSpread$10(_objectSpread$10({}, state), {}, {
+    return correctErrors(_objectSpread$13(_objectSpread$13({}, state), {}, {
       result: Object.assign({}, state.result, action.data.result)
     }), action.data);
   }
@@ -1138,7 +1161,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$10(_objectSpread$10({}, state), {}, {
+  newstate = newstate || _objectSpread$13(_objectSpread$13({}, state), {}, {
     result: Object.assign({}, state.result, action.data.result)
   });
   return correctErrors(newstate, action.data);
@@ -1158,11 +1181,11 @@ var correctErrors = function correctErrors(state, payload) {
 var onContextChange = function onContextChange(state, payload) {
   var context = payload.context,
       fieldValue = payload.fieldValue;
-  var fieldName = getSdataDefault(context);
+  var fieldName = getSdataDefault(sdataCustomSchema, 'fieldName');
   var fValue = fieldValue;
-  if (fValue === state.result.fieldValue) fValue = getSdataDefault(context, fieldName);
+  if (fValue === state.result.fieldValue) fValue = getSdataDefault(sdataCustomSchema, 'fieldValue');
   return {
-    result: _objectSpread$10(_objectSpread$10({}, payload), {}, {
+    result: _objectSpread$13(_objectSpread$13({}, payload), {}, {
       context: context,
       fieldName: fieldName,
       fieldValue: fValue
@@ -1173,10 +1196,10 @@ var onFieldNameChange = function onFieldNameChange(state, payload) {
   var fieldName = payload.fieldName;
   var context = state.result.context;
   var fieldValue = payload.fieldValue;
-  if (sdataSchema[context][fieldName]) fieldValue = getSdataDefault(context, fieldName);
+  if (sdataSchema[context][fieldName]) fieldValue = getSdataDefault(sdataSchema, context, fieldName);
   if (fieldValue === state.result.fieldValue && sdataSchema[context][state.result.fieldName]) fieldValue = '';
   return {
-    result: _objectSpread$10(_objectSpread$10({}, payload), {}, {
+    result: _objectSpread$13(_objectSpread$13({}, payload), {}, {
       fieldName: fieldName,
       fieldValue: fieldValue
     })
@@ -1280,7 +1303,7 @@ var formsState = {
     valid: true,
     result: {}
   },
-  sdata: initSdata()
+  sdata: initSdata(sdataCustomSchema)
 };
 function updateFormState(data) {
   return {
@@ -1314,8 +1337,8 @@ function formReducer(state, action, formName) {
 var INDIGO_VERIFICATION = 'INDIGO_VERIFICATION';
 var ANALYZING_FILE = 'ANALYZING_FILE';
 
-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$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 indigoVerification(data) {
   return {
     type: INDIGO_VERIFICATION,
@@ -1328,25 +1351,25 @@ function setAnalyzingFile(data) {
     data: data
   };
 }
-var initialState$1 = {
+var initialState$2 = {
   indigoVerification: false,
   isAnalyzingFile: false
 };
 function requestReducer () {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$1;
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$2;
   var action = arguments.length > 1 ? arguments[1] : undefined;
   var type = action.type,
       data = action.data;
   switch (type) {
     case INDIGO_VERIFICATION:
       {
-        return _objectSpread$$(_objectSpread$$({}, state), {}, {
+        return _objectSpread$12(_objectSpread$12({}, state), {}, {
           indigoVerification: data
         });
       }
     case ANALYZING_FILE:
       {
-        return _objectSpread$$(_objectSpread$$({}, state), {}, {
+        return _objectSpread$12(_objectSpread$12({}, state), {}, {
           isAnalyzingFile: data
         });
       }
@@ -1619,12 +1642,12 @@ var attachSchema = {
 };
 
 var _excluded$E = ["type", "radiobuttons"];
-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$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; }
 var DefaultStereoGroupNumber = 1;
 function fromElement(selem) {
   if (selem.label === 'R#') {
-    return _objectSpread$_({
+    return _objectSpread$11({
       type: 'rlabel',
       values: fromRlabel(selem.rglabel)
     }, selem);
@@ -1784,7 +1807,7 @@ function fromBond(sbond) {
   };
 }
 function toBond(bond) {
-  return _objectSpread$_({
+  return _objectSpread$11({
     topology: bond.topology,
     reactingCenterStatus: bond.center
   }, toBondType(bond.type));
@@ -1874,7 +1897,7 @@ function toSgroup(sgroup) {
   var type = sgroup.type,
       radiobuttons = sgroup.radiobuttons,
       props = _objectWithoutProperties(sgroup, _excluded$E);
-  var attrs = _objectSpread$_({}, props);
+  var attrs = _objectSpread$11({}, props);
   var absolute = 'absolute';
   var attached = 'attached';
   switch (radiobuttons) {
@@ -2375,8 +2398,8 @@ var tools$1 = typeSchema$1["enum"].reduce(function (res, type, i) {
 }, toolActions);
 
 var _excluded$D = ["rescale", "fragment"];
-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$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 onAction(action) {
   if (action && action.dialog) {
     return {
@@ -2403,6 +2426,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);
@@ -2423,7 +2449,7 @@ function load(struct, options) {
               server = state.server;
               errorHandler = editor.errorHandler;
               options = options || {};
-              options = _objectSpread$Z(_objectSpread$Z({}, options), {}, {
+              options = _objectSpread$10(_objectSpread$10({}, options), {}, {
                 'dearomatize-on-load': editor.options()['dearomatize-on-load']
               });
               dispatch(setAnalyzingFile(true));
@@ -2851,7 +2877,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.6.3\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.3\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -2912,9 +2938,9 @@ var fullscreen = {
   }
 };
 
-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; }
-var config = _objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y({
+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$$({
   clear: {
     shortcut: 'Mod+Delete',
     title: 'Clear Canvas',
@@ -5257,7 +5283,7 @@ function SvgTransformFlipH(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
-    d: "M42 22H6v4h36v-4zM40 18.27h-4V12H12v6.27H8V11.6A3.6 3.6 0 0111.6 8h24.8a3.6 3.6 0 013.6 3.6v6.67zM40 36.016v.4a3.6 3.6 0 01-3.6 3.6H36v-4h4zM12 40.016h-.4a3.6 3.6 0 01-3.6-3.6v-.4h4v4zM12 34.55v-4.534H8v4.534h4zM40 34.55v-4.534h-4v4.534h4zM33.4 36.016h-4.535v4H33.4v-4zM26.267 36.016h-4.534v4h4.534v-4zM19.135 36.016H14.6v4h4.534v-4z",
+    d: "M22.001 6v36h4V6h-4zM18.271 40h-6.67a3.6 3.6 0 01-3.6-3.6V11.6a3.6 3.6 0 013.6-3.6h6.67v4h-6.27v24h6.27v4zM36.001 8h.4a3.6 3.6 0 013.6 3.6v.4h-4V8zM40.001 36v.4a3.6 3.6 0 01-3.6 3.6h-.4v-4h4zM34.535 36h-4.534v4h4.534v-4zM34.535 8h-4.534v4h4.534V8zM36.001 14.598v4.534h4v-4.534h-4zM36.001 21.732v4.534h4v-4.534h-4zM36.001 28.866V33.4h4v-4.534h-4z",
     fill: "#231F20"
   })));
 }
@@ -5274,7 +5300,7 @@ function SvgTransformFlipV(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
-    d: "M22.001 6v36h4V6h-4zM18.271 40h-6.67a3.6 3.6 0 01-3.6-3.6V11.6a3.6 3.6 0 013.6-3.6h6.67v4h-6.27v24h6.27v4zM36.001 8h.4a3.6 3.6 0 013.6 3.6v.4h-4V8zM40.001 36v.4a3.6 3.6 0 01-3.6 3.6h-.4v-4h4zM34.535 36h-4.534v4h4.534v-4zM34.535 8h-4.534v4h4.534V8zM36.001 14.598v4.534h4v-4.534h-4zM36.001 21.732v4.534h4v-4.534h-4zM36.001 28.866V33.4h4v-4.534h-4z",
+    d: "M42 22H6v4h36v-4zM40 18.27h-4V12H12v6.27H8V11.6A3.6 3.6 0 0111.6 8h24.8a3.6 3.6 0 013.6 3.6v6.67zM40 36.016v.4a3.6 3.6 0 01-3.6 3.6H36v-4h4zM12 40.016h-.4a3.6 3.6 0 01-3.6-3.6v-.4h4v4zM12 34.55v-4.534H8v4.534h4zM40 34.55v-4.534h-4v4.534h4zM33.4 36.016h-4.535v4H33.4v-4zM26.267 36.016h-4.534v4h4.534v-4zM19.135 36.016H14.6v4h4.534v-4z",
     fill: "#231F20"
   })));
 }
@@ -6820,16 +6846,16 @@ function findIconByName(name) {
 }
 
 var _excluded$C = ["name"];
-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$_(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$X({}, props));
+  return jsx(Component, _objectSpread$_({}, props));
 }
 
-var classes$M = {"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"};
+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"};
 
 var isMac = /Mac/.test(navigator.platform);
 var shortcutAliasMap = {
@@ -6873,7 +6899,7 @@ var ActionButton = function ActionButton(props) {
     disabled: disabled,
     onClick: handleClick,
     title: shortcut ? "".concat(action === null || action === void 0 ? void 0 : action.title, " (").concat(shortcut, ")") : action === null || action === void 0 ? void 0 : action.title,
-    className: clsx(classes$M.button, _defineProperty({}, classes$M.selected, selected), className),
+    className: clsx(classes$N.button, _defineProperty({}, classes$N.selected, selected), className),
     children: [jsx(Icon, {
       name: name
     }), jsx("kbd", {
@@ -7029,7 +7055,7 @@ var DefaultMultiTool = function DefaultMultiTool(props) {
   });
 };
 
-var classes$L = {"group":"GroupedMultiTool-module_group__BJQAU"};
+var classes$M = {"group":"GroupedMultiTool-module_group__BJQAU"};
 
 var GroupedMultiTool = function GroupedMultiTool(props) {
   var groups = props.groups,
@@ -7044,7 +7070,7 @@ var GroupedMultiTool = function GroupedMultiTool(props) {
   return jsx(Fragment, {
     children: groups.map(function (descriptor) {
       return jsx("div", {
-        className: classes$L.group,
+        className: classes$M.group,
         children: options.slice(descriptor.start, descriptor.end).map(function (toolbarItem) {
           var currentStatus = status[toolbarItem.id];
           return jsx(ActionButton, {
@@ -7074,7 +7100,7 @@ function chooseMultiTool() {
   }
 }
 
-var classes$K = {"button-common-styles":"ToolbarMultiToolItem-module_button-common-styles__Fuxbo","scrollbar":"ToolbarMultiToolItem-module_scrollbar__XTmfz","icon":"ToolbarMultiToolItem-module_icon__-HQal","iconSelected":"ToolbarMultiToolItem-module_iconSelected__hlO0J","portal":"ToolbarMultiToolItem-module_portal__2XJgz","portal-vertical":"ToolbarMultiToolItem-module_portal-vertical__A0DVe"};
+var classes$L = {"button-common-styles":"ToolbarMultiToolItem-module_button-common-styles__Fuxbo","scrollbar":"ToolbarMultiToolItem-module_scrollbar__XTmfz","icon":"ToolbarMultiToolItem-module_icon__-HQal","iconSelected":"ToolbarMultiToolItem-module_iconSelected__hlO0J","portal":"ToolbarMultiToolItem-module_portal__2XJgz","portal-vertical":"ToolbarMultiToolItem-module_portal-vertical__A0DVe"};
 
 function usePortalOpening(_ref) {
   var _ref2 = _slicedToArray(_ref, 3),
@@ -7122,8 +7148,8 @@ function usePortalStyle(_ref) {
   return [portalStyle];
 }
 
-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$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 ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
   var id = props.id,
       options = props.options,
@@ -7184,20 +7210,20 @@ var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
       portalClassName = _chooseMultiTool2[1];
   return displayMultiToolItem ? jsxs("div", {
     ref: ref,
-    className: classes$K.root,
-    children: [jsx(ActionButton, _objectSpread$W(_objectSpread$W({}, actionButtonProps), {}, {
+    className: classes$L.root,
+    children: [jsx(ActionButton, _objectSpread$Z(_objectSpread$Z({}, actionButtonProps), {}, {
       className: className,
       name: currentId,
       action: config[currentId],
       status: currentStatus,
       selected: selected
     })), !isOpen && jsx(Icon, {
-      className: "".concat(classes$K.icon, " ").concat((currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.selected) && classes$K.iconSelected),
+      className: "".concat(classes$L.icon, " ").concat((currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.selected) && classes$L.iconSelected),
       name: "dropdown",
       onClick: onOpenOptions
     }), isOpen ? jsx(Portal, {
       isOpen: isOpen,
-      className: clsx(classes$K.portal, vertical && classes$K['portal-vertical'], portalClassName),
+      className: clsx(classes$L.portal, vertical && classes$L['portal-vertical'], portalClassName),
       style: portalStyle,
       children: jsx(Component, {
         options: options,
@@ -7282,16 +7308,16 @@ var TemplatesList = function TemplatesList(props) {
   });
 };
 
-var classes$J = {"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 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$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$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; }
 var Group$1 = function Group(_ref) {
   var children = _ref.children,
       className = _ref.className;
   return jsx("div", {
-    className: clsx(classes$J.group, className),
+    className: clsx(classes$K.group, className),
     children: children
   });
 };
@@ -7303,7 +7329,7 @@ var BottomToolbar = function BottomToolbar(props) {
       indigoVerification = rest.indigoVerification,
       onAction = rest.onAction;
   return jsxs("div", {
-    className: clsx(classes$J.root, className),
+    className: clsx(classes$K.root, className),
     children: [jsx(Group$1, {
       children: jsx(TemplatesList, {
         active: active,
@@ -7312,7 +7338,7 @@ var BottomToolbar = function BottomToolbar(props) {
         onAction: onAction
       })
     }), jsx(Group$1, {
-      children: jsx(ToolbarGroupItem, _objectSpread$V({
+      children: jsx(ToolbarGroupItem, _objectSpread$Y({
         id: "template-lib"
       }, rest))
     })]
@@ -7407,15 +7433,15 @@ function prefetchRender(tmpls, baseUrl, cacheEl) {
   });
 }
 
-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$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 openDialog(dispatch, dialogName, props) {
   return new Promise(function (resolve, reject) {
     dispatch({
       type: 'MODAL_OPEN',
       data: {
         name: dialogName,
-        prop: _objectSpread$U(_objectSpread$U({}, props), {}, {
+        prop: _objectSpread$X(_objectSpread$X({}, props), {}, {
           onResult: resolve,
           onCancel: reject
         })
@@ -7433,7 +7459,7 @@ function modalReducer() {
       return null;
     }
     var formState = formReducer(state.form, action, state.name);
-    return _objectSpread$U(_objectSpread$U({}, state), {}, {
+    return _objectSpread$X(_objectSpread$X({}, state), {}, {
       form: formState
     });
   }
@@ -7451,8 +7477,8 @@ function modalReducer() {
   }
 }
 
-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; }
+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 selectTmpl(tmpl) {
   return {
     type: 'TMPL_SELECT',
@@ -7474,7 +7500,7 @@ function changeFilter(filter) {
   return {
     type: 'TMPL_CHANGE_FILTER',
     data: {
-      filter: filter.trim(),
+      filter: filter,
       selected: null
     }
   };
@@ -7552,7 +7578,7 @@ function saveUserTmpl(struct) {
       var name = _ref.name,
           attach = _ref.attach;
       tmpl.struct.name = name.trim();
-      tmpl.props = _objectSpread$T(_objectSpread$T({}, attach), {}, {
+      tmpl.props = _objectSpread$W(_objectSpread$W({}, attach), {}, {
         group: 'User Templates'
       });
       var lib = getState().templates.lib.concat(tmpl);
@@ -7591,7 +7617,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$T(_objectSpread$T({}, state), {}, {
+    return _objectSpread$W(_objectSpread$W({}, state), {}, {
       attach: attach
     });
   }
@@ -7600,7 +7626,7 @@ function templatesReducer() {
     var lib = currentState.lib.filter(function (value) {
       return value !== action.data.tmpl;
     });
-    return _objectSpread$T(_objectSpread$T({}, currentState), {}, {
+    return _objectSpread$W(_objectSpread$W({}, currentState), {}, {
       lib: lib
     });
   }
@@ -7608,8 +7634,8 @@ function templatesReducer() {
 }
 
 var _excluded$A = ["type", "action"];
-function ownKeys$S(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$S(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$S(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$S(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; }
 function execute(activeTool, _ref) {
   var action = _ref.action,
       editor = _ref.editor,
@@ -7621,7 +7647,9 @@ function execute(activeTool, _ref) {
     }
   } else if (typeof action === 'function') {
     action(editor, server, options);
-  } else ;
+  } else {
+    console.info('no action');
+  }
   return activeTool;
 }
 function selected(actObj, activeTool, _ref2) {
@@ -7663,7 +7691,7 @@ function actionStateReducer () {
     case 'INIT':
       action = config['select-rectangle'].action;
     case 'ACTION':
-      activeTool = execute(state && state.activeTool, _objectSpread$S(_objectSpread$S({}, params), {}, {
+      activeTool = execute(state && state.activeTool, _objectSpread$V(_objectSpread$V({}, params), {}, {
         action: action
       }));
     case 'UPDATE':
@@ -7679,20 +7707,25 @@ function actionStateReducer () {
   }
 }
 
-function ownKeys$R(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$R(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$R(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$R(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var initialState = {
+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 initialState$1 = {
   lib: [],
+  functionalGroupInfo: null,
   mode: 'fg'
 };
 var functionalGroupsReducer = function functionalGroupsReducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$1;
   var _ref = arguments.length > 1 ? arguments[1] : undefined,
       type = _ref.type,
       payload = _ref.payload;
   switch (type) {
     case 'FG_INIT':
-      return _objectSpread$R(_objectSpread$R({}, state), payload);
+      return _objectSpread$U(_objectSpread$U({}, state), payload);
+    case 'FG_HIGHLIGHT':
+      return _objectSpread$U(_objectSpread$U({}, state), {}, {
+        functionalGroupInfo: payload
+      });
     default:
       return state;
   }
@@ -7705,6 +7738,15 @@ var initFGroups = function initFGroups(lib) {
     }
   };
 };
+var highlightFGroup = function highlightFGroup(group) {
+  return {
+    type: 'FG_HIGHLIGHT',
+    payload: group
+  };
+};
+function highlightFG(dispatch, group) {
+  dispatch(highlightFGroup(group));
+}
 function initFGTemplates(baseUrl) {
   return function () {
     var _ref2 = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(dispatch) {
@@ -7744,8 +7786,78 @@ function initFGTemplates(baseUrl) {
   }();
 }
 
-function ownKeys$Q(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$Q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 = {
+  lib: [],
+  mode: 'fg'
+};
+var saltsAndSolventsReducer = function saltsAndSolventsReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var _ref = arguments.length > 1 ? arguments[1] : undefined,
+      type = _ref.type,
+      payload = _ref.payload;
+  switch (type) {
+    case 'SALTS_AND_SOLVENTS_INIT':
+      return _objectSpread$T(_objectSpread$T({}, state), payload);
+    default:
+      return state;
+  }
+};
+var initSaltsAndSolvents = function initSaltsAndSolvents(lib) {
+  return {
+    type: 'SALTS_AND_SOLVENTS_INIT',
+    payload: {
+      lib: lib
+    }
+  };
+};
+function initSaltsAndSolventsTemplates(baseUrl) {
+  return function () {
+    var _ref2 = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(dispatch) {
+      var fileName, 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';
+              url = "".concat(baseUrl, "/templates/").concat(fileName);
+              saltsAndSolventsProvider = SaltsAndSolventsProvider.getInstance();
+              functionalGroupsProvider = FunctionalGroupsProvider.getInstance();
+              sdfSerializer = new SdfSerializer();
+              _context.next = 7;
+              return prefetchStatic(url);
+            case 7:
+              text = _context.sent;
+              templates = sdfSerializer.deserialize(text);
+              saltsAndSolvents = templates.reduce(function (acc, _ref3) {
+                var struct = _ref3.struct,
+                    props = _ref3.props;
+                struct.abbreviation = String(props.abbreviation);
+                acc.push(struct);
+                return acc;
+              }, []);
+              saltsAndSolventsProvider.setSaltsAndSolventsList(saltsAndSolvents);
+              functionalGroupsProvider.addToFunctionalGroupsList(saltsAndSolvents);
+              dispatch(initSaltsAndSolvents(templates));
+              dispatch(appUpdate({
+                saltsAndSolvents: true
+              }));
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+}
+
+function ownKeys$S(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$S(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$S(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$S(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var initial = {
   freqAtoms: [],
   currentAtom: 0,
@@ -7765,7 +7877,7 @@ function updateVisibleTools(visibleTool, activeTool) {
     if (key === 'shape' && menuHeight > 900) return res;
     if (!key.match(regExp) || menuHeight > 700) res[key] = visibleTool[key];
     return res;
-  }, _objectSpread$Q({}, activeTool));
+  }, _objectSpread$S({}, activeTool));
 }
 function initResize() {
   return function (dispatch, getState) {
@@ -7789,41 +7901,41 @@ function toolbarReducer () {
     case 'ACTION':
       {
         var visibleTool = toolInMenu(action.action);
-        return visibleTool ? _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+        return visibleTool ? _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: null,
-          visibleTools: _objectSpread$Q(_objectSpread$Q({}, state.visibleTools), visibleTool)
-        }) : _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+          visibleTools: _objectSpread$S(_objectSpread$S({}, state.visibleTools), visibleTool)
+        }) : _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: null
         });
       }
     case 'ADD_ATOMS':
       {
         var newState = addFreqAtom(data, state.freqAtoms, state.currentAtom);
-        return _objectSpread$Q(_objectSpread$Q({}, state), newState);
+        return _objectSpread$S(_objectSpread$S({}, state), newState);
       }
     case 'CLEAR_VISIBLE':
       {
         var activeTool = toolInMenu(action.data);
         var correctTools = updateVisibleTools(state.visibleTools, activeTool);
-        return _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+        return _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: null,
-          visibleTools: _objectSpread$Q({}, correctTools)
+          visibleTools: _objectSpread$S({}, correctTools)
         });
       }
     case 'OPENED':
       {
-        return data.isSelected && state.opened ? _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+        return data.isSelected && state.opened ? _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: null
-        }) : _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+        }) : _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: data.menuName
         });
       }
     case 'UPDATE':
-      return _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+      return _objectSpread$S(_objectSpread$S({}, state), {}, {
         opened: null
       });
     case 'MODAL_OPEN':
-      return _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+      return _objectSpread$S(_objectSpread$S({}, state), {}, {
         opened: null
       });
     default:
@@ -7867,9 +7979,9 @@ function hiddenAncestor(el, base) {
 }
 
 var _excluded$z = ["type"],
-    _excluded2$6 = ["buttons"];
-function ownKeys$P(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$P(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$P(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$P(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+    _excluded2$5 = ["buttons"];
+function ownKeys$R(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$R(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$R(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$R(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var shared = combineReducers({
   actionState: actionStateReducer,
   toolbar: toolbarReducer,
@@ -7885,6 +7997,7 @@ var shared = combineReducers({
   options: optionsReducer,
   templates: templatesReducer,
   functionalGroups: functionalGroupsReducer,
+  saltsAndSolvents: saltsAndSolventsReducer,
   requestsStatuses: requestReducer
 });
 function getRootReducer(setEditor) {
@@ -7895,10 +8008,10 @@ function getRootReducer(setEditor) {
       case 'UPDATE':
         action.type;
             var data = _objectWithoutProperties(action, _excluded$z);
-        if (data) state = _objectSpread$P(_objectSpread$P({}, state), data);
+        if (data) state = _objectSpread$R(_objectSpread$R({}, state), data);
     }
-    var sh = shared(state, _objectSpread$P(_objectSpread$P({}, action), pick(['editor', 'server', 'options'], state)));
-    var finalState = sh === state.shared ? state : _objectSpread$P(_objectSpread$P({}, state), sh);
+    var sh = shared(state, _objectSpread$R(_objectSpread$R({}, action), pick(['editor', 'server', 'options'], state)));
+    var finalState = sh === state.shared ? state : _objectSpread$R(_objectSpread$R({}, state), sh);
     global.currentState = finalState;
     return finalState;
   };
@@ -7906,7 +8019,7 @@ function getRootReducer(setEditor) {
 function createStore (options, server, setEditor) {
   var _options$buttons = options.buttons,
       buttons = _options$buttons === void 0 ? {} : _options$buttons,
-      restOptions = _objectWithoutProperties(options, _excluded2$6);
+      restOptions = _objectWithoutProperties(options, _excluded2$5);
   var initState = {
     actionState: null,
     editor: null,
@@ -7919,6 +8032,9 @@ function createStore (options, server, setEditor) {
     templates: initTmplsState
   };
   var middleware = [thunk];
+  if (process.env.KETCHER_ENABLE_REDUX_LOGGER === 'true') {
+    middleware.push(logger);
+  }
   var rootReducer = getRootReducer(setEditor);
   return createStore$1(rootReducer, initState, applyMiddleware.apply(void 0, middleware));
 }
@@ -7981,14 +8097,14 @@ var selectOptions$2 = makeItems(['select-rectangle', 'select-lasso', 'select-fra
 var arrowsOptions = makeItems(['reaction-arrow-open-angle', 'reaction-arrow-filled-triangle', 'reaction-arrow-filled-bow', 'reaction-arrow-dashed-open-angle', 'reaction-arrow-failed', 'reaction-arrow-both-ends-filled-triangle', 'reaction-arrow-equilibrium-filled-half-bow', 'reaction-arrow-equilibrium-filled-triangle', 'reaction-arrow-equilibrium-open-angle', 'reaction-arrow-unbalanced-equilibrium-filled-half-bow', 'reaction-arrow-unbalanced-equilibrium-open-half-angle', 'reaction-arrow-unbalanced-equilibrium-large-filled-half-bow', 'reaction-arrow-unbalanced-equilibrium-filled-half-triangle', 'reaction-arrow-elliptical-arc-arrow-filled-bow', 'reaction-arrow-elliptical-arc-arrow-filled-triangle', 'reaction-arrow-elliptical-arc-arrow-open-angle', 'reaction-arrow-elliptical-arc-arrow-open-half-angle']);
 var mappingOptions = makeItems(['reaction-map', 'reaction-unmap', 'reaction-automap']);
 
-var classes$I = {"scroll":"ArrowScroll-module_scroll__h9kCx","button":"ArrowScroll-module_button__ygMgL","down":"ArrowScroll-module_down__yDzZX","up":"ArrowScroll-module_up__Q1ubd"};
+var classes$J = {"scroll":"ArrowScroll-module_scroll__h9kCx","button":"ArrowScroll-module_button__ygMgL","down":"ArrowScroll-module_down__yDzZX","up":"ArrowScroll-module_up__Q1ubd"};
 
 function useSettingsContext() {
   return React__default.useContext(settingsContext);
 }
 
-function ownKeys$O(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$O(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$O(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$Q(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$Q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var throttleMilliseconds = 100;
 function useThrottleResizeObserver() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -8002,11 +8118,11 @@ function useThrottleResizeObserver() {
   var onResize = useMemo(function () {
     return throttle$1(setSize, throttleMilliseconds);
   }, []);
-  var _useResizeObserver = useResizeObserver(_objectSpread$O({
+  var _useResizeObserver = useResizeObserver(_objectSpread$Q({
     onResize: onResize
   }, options)),
       ref = _useResizeObserver.ref;
-  return _objectSpread$O({
+  return _objectSpread$Q({
     ref: ref
   }, size);
 }
@@ -8102,7 +8218,7 @@ var ArrowScroll = function ArrowScroll(_ref) {
     };
   }, [endInView]);
   return jsxs("div", {
-    className: classes$I.scroll,
+    className: classes$J.scroll,
     children: [endInView ? jsx(Fragment, {}) : jsx("button", {
       onClick: function onClick() {
         return scrollDown();
@@ -8113,7 +8229,7 @@ var ArrowScroll = function ArrowScroll(_ref) {
       onMouseDown: function onMouseDown() {
         return setScrollDown(true);
       },
-      className: clsx(classes$I.button, classes$I.down),
+      className: clsx(classes$J.button, classes$J.down),
       children: "\u25BC"
     }), startInView ? jsx(Fragment, {}) : jsx("button", {
       onClick: function onClick() {
@@ -8125,7 +8241,7 @@ var ArrowScroll = function ArrowScroll(_ref) {
       onMouseDown: function onMouseDown() {
         return setScrollUp(true);
       },
-      className: clsx(classes$I.button, classes$I.up),
+      className: clsx(classes$J.button, classes$J.up),
       children: "\u25B2"
     })]
   });
@@ -8140,13 +8256,13 @@ var mediaSizes$2 = {
 };
 
 var _excluded$y = ["height"];
-function ownKeys$N(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$N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$P(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$P(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$P(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$P(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Bond$1 = function Bond(props) {
   var height = props.height,
       rest = _objectWithoutProperties(props, _excluded$y);
   if (height && height <= mediaSizes$2.bondCollapsableHeight) {
-    return jsx(ToolbarMultiToolItem, _objectSpread$N({
+    return jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bonds",
       options: groupOptions,
       variant: "grouped",
@@ -8154,68 +8270,68 @@ var Bond$1 = function Bond(props) {
     }, rest));
   }
   return jsxs(Fragment, {
-    children: [jsx(ToolbarMultiToolItem, _objectSpread$N({
+    children: [jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bond-common",
       options: bondCommon
-    }, rest)), jsx(ToolbarMultiToolItem, _objectSpread$N({
+    }, rest)), jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bond-stereo",
       options: bondStereo
-    }, rest)), jsx(ToolbarMultiToolItem, _objectSpread$N({
+    }, rest)), jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bond-query",
       options: bondQuery
-    }, rest)), jsx(ToolbarMultiToolItem, _objectSpread$N({
+    }, rest)), jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bond-special",
       options: bondSpecial
     }, rest))]
   });
 };
 
-function ownKeys$M(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$M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$O(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$O(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$O(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var RGroup$1 = function RGroup(props) {
-  return jsx(ToolbarGroupItem, _objectSpread$M({
+  return jsx(ToolbarGroupItem, _objectSpread$O({
     id: "rgroup",
     options: rGroupOptions
   }, props));
 };
 
-function ownKeys$L(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$L(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$L(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$N(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$N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Shape = function Shape(props) {
-  return jsx(ToolbarGroupItem, _objectSpread$L({
+  return jsx(ToolbarGroupItem, _objectSpread$N({
     id: "shapes",
     options: shapeOptions
   }, props));
 };
 
 var _excluded$x = ["height"];
-function ownKeys$K(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$K(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$K(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$K(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$M(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$M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Transform = function Transform(props) {
   var height = props.height,
       rest = _objectWithoutProperties(props, _excluded$x);
   if (height && height <= mediaSizes$2.transformCollapsableHeight) {
-    return jsx(ToolbarGroupItem, _objectSpread$K({
+    return jsx(ToolbarGroupItem, _objectSpread$M({
       id: "transforms",
       options: transformOptions
     }, rest));
   }
   return jsxs(Fragment, {
-    children: [jsx(ToolbarGroupItem, _objectSpread$K({
+    children: [jsx(ToolbarGroupItem, _objectSpread$M({
       id: "transform-rotate"
-    }, rest)), jsx(ToolbarGroupItem, _objectSpread$K({
+    }, rest)), jsx(ToolbarGroupItem, _objectSpread$M({
       id: "transform-flip-h"
-    }, rest)), jsx(ToolbarGroupItem, _objectSpread$K({
+    }, rest)), jsx(ToolbarGroupItem, _objectSpread$M({
       id: "transform-flip-v"
     }, rest))]
   });
 };
 
-var classes$H = {"button-common-styles":"LeftToolbar-module_button-common-styles__WgnON","scrollbar":"LeftToolbar-module_scrollbar__OBwid","group":"LeftToolbar-module_group__0s41t","root":"LeftToolbar-module_root__yhhZm","buttons":"LeftToolbar-module_buttons__lnIjn","borderOff":"LeftToolbar-module_borderOff__om425","groupItem":"LeftToolbar-module_groupItem__OqQu0"};
+var classes$I = {"button-common-styles":"LeftToolbar-module_button-common-styles__WgnON","scrollbar":"LeftToolbar-module_scrollbar__OBwid","group":"LeftToolbar-module_group__0s41t","root":"LeftToolbar-module_root__yhhZm","buttons":"LeftToolbar-module_buttons__lnIjn","borderOff":"LeftToolbar-module_borderOff__om425","groupItem":"LeftToolbar-module_groupItem__OqQu0"};
 
 var _excluded$w = ["className"];
-function ownKeys$J(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$J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$J(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$L(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$L(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$L(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var LeftToolbar = function LeftToolbar(props) {
   var className = props.className,
       rest = _objectWithoutProperties(props, _excluded$w);
@@ -8239,7 +8355,7 @@ var LeftToolbar = function LeftToolbar(props) {
   var Item = function Item(_ref) {
     var id = _ref.id,
         options = _ref.options;
-    return ToolbarGroupItem(_objectSpread$J({
+    return ToolbarGroupItem(_objectSpread$L({
       id: id,
       options: options
     }, rest));
@@ -8271,25 +8387,25 @@ var LeftToolbar = function LeftToolbar(props) {
       });
     }
     return visibleItems.length ? jsx("div", {
-      className: clsx(classes$H.group, className),
+      className: clsx(classes$I.group, className),
       children: visibleItems.map(function (item) {
         switch (item.id) {
           case 'bond-common':
-            return createElement(Bond$1, _objectSpread$J(_objectSpread$J({}, rest), {}, {
+            return createElement(Bond$1, _objectSpread$L(_objectSpread$L({}, rest), {}, {
               height: height,
               key: item.id
             }));
           case 'transform-rotate':
-            return createElement(Transform, _objectSpread$J(_objectSpread$J({}, rest), {}, {
+            return createElement(Transform, _objectSpread$L(_objectSpread$L({}, rest), {}, {
               height: height,
               key: item.id
             }));
           case 'rgroup':
-            return createElement(RGroup$1, _objectSpread$J(_objectSpread$J({}, rest), {}, {
+            return createElement(RGroup$1, _objectSpread$L(_objectSpread$L({}, rest), {}, {
               key: item.id
             }));
           case 'shapes':
-            return createElement(Shape, _objectSpread$J(_objectSpread$J({}, rest), {}, {
+            return createElement(Shape, _objectSpread$L(_objectSpread$L({}, rest), {}, {
               key: item.id
             }));
           default:
@@ -8302,16 +8418,16 @@ var LeftToolbar = function LeftToolbar(props) {
     }) : null;
   };
   return jsxs("div", {
-    className: clsx(classes$H.root, className),
+    className: clsx(classes$I.root, className),
     ref: ref,
     children: [jsxs("div", {
-      className: classes$H.buttons,
+      className: classes$I.buttons,
       ref: scrollRef,
       children: [jsx("div", {
-        className: classes$H.listener,
+        className: classes$I.listener,
         ref: startRef,
         children: jsx(Group, {
-          className: classes$H.groupItem,
+          className: classes$I.groupItem,
           items: [{
             id: 'hand'
           }, {
@@ -8322,7 +8438,7 @@ var LeftToolbar = function LeftToolbar(props) {
           }]
         })
       }), jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'bonds',
           options: [].concat(_toConsumableArray(bondCommon), _toConsumableArray(bondQuery), _toConsumableArray(bondSpecial), _toConsumableArray(bondStereo))
@@ -8330,27 +8446,27 @@ var LeftToolbar = function LeftToolbar(props) {
           id: 'chain'
         }]
       }), jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'charge-plus'
         }, {
           id: 'charge-minus'
         }]
       }), jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'transforms',
           options: transformOptions
         }]
       }), jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'sgroup'
         }, {
           id: 'sgroup-data'
         }]
       }), jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'reaction-plus'
         }, {
@@ -8361,17 +8477,17 @@ var LeftToolbar = function LeftToolbar(props) {
           options: mappingOptions
         }]
       }), jsx("div", {
-        className: classes$H.listener,
+        className: classes$I.listener,
         ref: sizeRef,
         children: jsx(Group, {
-          className: classes$H.groupItem,
+          className: classes$I.groupItem,
           items: [{
             id: 'rgroup',
             options: rGroupOptions
           }]
         })
       }), jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'shapes',
           options: shapeOptions
@@ -8379,7 +8495,7 @@ var LeftToolbar = function LeftToolbar(props) {
       }), jsx("div", {
         ref: endRef,
         children: jsx(Group, {
-          className: classes$H.groupItem,
+          className: classes$I.groupItem,
           items: [{
             id: 'text'
           }]
@@ -8420,19 +8536,19 @@ var mapDispatchToProps$h = function mapDispatchToProps(dispatch) {
 };
 var LeftToolbarContainer = connect(mapStateToProps$i, mapDispatchToProps$h)(LeftToolbar);
 
-var classes$G = {"button-common-styles":"Atom-module_button-common-styles__j3EUJ","scrollbar":"Atom-module_scrollbar__iO-Ni","atom":"Atom-module_atom__g2RUu"};
+var classes$H = {"button-common-styles":"Atom-module_button-common-styles__j3EUJ","scrollbar":"Atom-module_scrollbar__iO-Ni","atom":"Atom-module_atom__g2RUu"};
 
 var _excluded$v = ["el", "shortcut", "selected"];
-function ownKeys$I(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$I(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$I(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$K(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$K(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$K(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$K(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function Atom$1(_ref) {
   var el = _ref.el,
       shortcut = _ref.shortcut,
       selected = _ref.selected,
       props = _objectWithoutProperties(_ref, _excluded$v);
-  return jsx("button", _objectSpread$I(_objectSpread$I({
+  return jsx("button", _objectSpread$K(_objectSpread$K({
     title: shortcut ? "".concat(el.title, " (").concat(shortcut, ")") : el.title,
-    className: clsx(classes$G.atom, {
+    className: clsx(classes$H.atom, {
       selected: selected
     }),
     value: el.number
@@ -8811,16 +8927,16 @@ var AtomsList = forwardRef(function (props, ref) {
   });
 });
 
-var classes$F = {"button-common-styles":"RightToolbar-module_button-common-styles__fNlqY","scrollbar":"RightToolbar-module_scrollbar__2Q0UU","group":"RightToolbar-module_group__3mhUx","root":"RightToolbar-module_root__1D5hp","atomsList":"RightToolbar-module_atomsList__ar08-","buttons":"RightToolbar-module_buttons__YxRHI"};
+var classes$G = {"button-common-styles":"RightToolbar-module_button-common-styles__fNlqY","scrollbar":"RightToolbar-module_scrollbar__2Q0UU","group":"RightToolbar-module_group__3mhUx","root":"RightToolbar-module_root__1D5hp","atomsList":"RightToolbar-module_atomsList__ar08-","buttons":"RightToolbar-module_buttons__YxRHI"};
 
 var _excluded$u = ["className"];
-function ownKeys$H(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$H(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$H(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$J(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$J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$J(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Group = function Group(_ref) {
   var children = _ref.children,
       className = _ref.className;
   return jsx("div", {
-    className: clsx(classes$F.group, className),
+    className: clsx(classes$G.group, className),
     children: children
   });
 };
@@ -8851,12 +8967,12 @@ var RightToolbar = function RightToolbar(props) {
     scrollRef.current.scrollTop += sizeRef.current.offsetHeight;
   };
   return jsxs("div", {
-    className: clsx(classes$F.root, className),
+    className: clsx(classes$G.root, className),
     children: [jsxs("div", {
-      className: classes$F.buttons,
+      className: classes$G.buttons,
       ref: scrollRef,
       children: [jsxs(Group, {
-        className: classes$F.atomsList,
+        className: classes$G.atomsList,
         children: [jsx(AtomsList, {
           ref: startRef,
           atoms: basicAtoms,
@@ -8866,15 +8982,15 @@ var RightToolbar = function RightToolbar(props) {
           atoms: freqAtoms,
           active: active,
           onAction: onAction
-        }), jsx(ToolbarGroupItem, _objectSpread$H({
+        }), jsx(ToolbarGroupItem, _objectSpread$J({
           id: "period-table"
         }, rest))]
       }), jsx(Group, {
         children: jsxs("div", {
           ref: sizeRef,
-          children: [jsx(ToolbarGroupItem, _objectSpread$H({
+          children: [jsx(ToolbarGroupItem, _objectSpread$J({
             id: "any-atom"
-          }, rest)), jsx(ToolbarGroupItem, _objectSpread$H({
+          }, rest)), jsx(ToolbarGroupItem, _objectSpread$J({
             id: "extended-table"
           }, rest))]
         })
@@ -9505,6 +9621,7 @@ var TopToolbar = function TopToolbar(_ref) {
       isCollapsed: width < collapseLimit
     }), jsx(SystemControls, {
       onHistoryClick: function onHistoryClick() {
+        console.log('History button clicked');
       },
       onSettingsOpen: onSettingsOpen,
       onFullscreen: onFullscreen,
@@ -9726,6 +9843,11 @@ function lookup(map, event) {
 }
 keyNorm.lookup = lookup;
 
+function _createForOfIteratorHelper$e(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$e(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray$e(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$e(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$e(o, minLen); }
+function _arrayLikeToArray$e(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function ownKeys$I(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$I(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$I(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function initKeydownListener(element) {
   return function (dispatch, getState) {
     var hotKeys = initHotKeys();
@@ -9737,6 +9859,7 @@ function initKeydownListener(element) {
 function keyHandle(dispatch, state, hotKeys, event) {
   if (state.modal) return;
   var editor = state.editor;
+  var render = editor.render;
   var actionState = state.actionState;
   var actionTool = actionState.activeTool;
   var key = keyNorm(event);
@@ -9756,7 +9879,8 @@ function keyHandle(dispatch, state, hotKeys, event) {
     event.preventDefault();
   } else if ((group = keyNorm.lookup(hotKeys, event)) !== undefined) {
     var index = checkGroupOnTool(group, actionTool);
-    index = (index + 1) % group.length;
+    var groupLength = group !== null ? group.length : 1;
+    index = (index + 1) % groupLength;
     var actName = group[index];
     if (actionState[actName] && actionState[actName].disabled === true) {
       event.preventDefault();
@@ -9764,13 +9888,38 @@ function keyHandle(dispatch, state, hotKeys, event) {
     }
     if (actions.indexOf(actName) === -1) {
       var newAction = config[actName].action;
-      dispatch(onAction(newAction));
+      var hoverItemId = getHoveredAtomId(render.ctab.atoms);
+      var isHoveringOverAtom = hoverItemId !== null;
+      if (isHoveringOverAtom) {
+        var atomProps = _objectSpread$I({}, newAction.opts);
+        var updatedAtoms = fromAtomsAttrs(render.ctab, hoverItemId, atomProps, true);
+        editor.update(updatedAtoms);
+      } else {
+        dispatch(onAction(newAction));
+      }
       event.preventDefault();
-    } else if (window.clipboardData) {
+    } else if (isIE) {
       exec(event);
     }
   }
 }
+function getHoveredAtomId(atoms) {
+  var _iterator = _createForOfIteratorHelper$e(atoms.entries()),
+      _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+          id = _step$value[0],
+          atom = _step$value[1];
+      if (atom.hover) return id;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+}
 function setHotKey(key, actName, hotKeys) {
   if (Array.isArray(hotKeys[key])) hotKeys[key].push(actName);else hotKeys[key] = [actName];
 }
@@ -9798,7 +9947,7 @@ function checkGroupOnTool(group, actionTool) {
   return index;
 }
 var rxnTextPlain = /\$RXN\n+\s+0\s+0\s+0\n*/;
-function initClipboard(dispatch, getState) {
+function initClipboard(dispatch) {
   var formats = Object.keys(formatProperties).map(function (format) {
     return formatProperties[format].mime;
   });
@@ -9845,7 +9994,7 @@ function clipData(editor) {
   var errorHandler = editor.errorHandler;
   if (struct.isBlank()) return null;
   var simpleObjectOrText = Boolean(struct.simpleObjects.size || struct.texts.size);
-  if (simpleObjectOrText && window.clipboardData) {
+  if (simpleObjectOrText && isIE) {
     errorHandler('The structure you are trying to copy contains Simple object or/and Text object.' + 'To copy Simple object or Text object in Internet Explorer try "Copy as KET" button');
     return null;
   }
@@ -9859,8 +10008,8 @@ function clipData(editor) {
     res['text/plain'] = data;
     res[type] = data;
     return res;
-  } catch (ex) {
-    errorHandler(ex.message);
+  } catch (e) {
+    errorHandler(e.message);
   }
   return null;
 }
@@ -9894,7 +10043,7 @@ var mapDispatchToProps$d = function mapDispatchToProps(dispatch) {
 };
 var AppHiddenContainer = connect(null, mapDispatchToProps$d)(AppHidden);
 
-var classes$E = {"button-common-styles":"Modal-module_button-common-styles__ko9E5","scrollbar":"Modal-module_scrollbar__yPIJc","modalOverlay":"Modal-module_modalOverlay__AzVeg","animate":"Modal-module_animate__pnPNj","hide":"Modal-module_hide__0CTey","smallScreen":"Modal-module_smallScreen__nzt2L"};
+var classes$F = {"button-common-styles":"Modal-module_button-common-styles__ko9E5","scrollbar":"Modal-module_scrollbar__yPIJc","modalOverlay":"Modal-module_modalOverlay__AzVeg","animate":"Modal-module_animate__pnPNj","hide":"Modal-module_hide__0CTey","smallScreen":"Modal-module_smallScreen__nzt2L"};
 
 var selectClasses = {"button-common-styles":"Select-module_button-common-styles__cgaVz","scrollbar":"Select-module_scrollbar__cA89D","dropdownList":"Select-module_dropdownList__rdcrH","selectContainer":"Select-module_selectContainer__yXT-t"};
 
@@ -9906,8 +10055,8 @@ var mediaSizes$1 = {
 var styles$c = {"button-common-styles":"Dialog-module_button-common-styles__HcaFV","scrollbar":"Dialog-module_scrollbar__9Iy27","dialog":"Dialog-module_dialog__IafFQ","hide":"Dialog-module_hide__6R16B","header":"Dialog-module_header__T7-24","btnContainer":"Dialog-module_btnContainer__TOLPx","buttonTop":"Dialog-module_buttonTop__ZhwZQ","closeButton":"Dialog-module_closeButton__Ch6UT","footer":"Dialog-module_footer__NTq5o","ok":"Dialog-module_ok__T4j7Z","cancel":"Dialog-module_cancel__RcR-D","withDivider":"Dialog-module_withDivider__8LsbA","body":"Dialog-module_body__YgzDR","withMargin":"Dialog-module_withMargin__SDH61"};
 
 var _excluded$t = ["children", "title", "params", "result", "valid", "buttons", "headerContent", "footerContent", "className", "buttonsNameMap", "needMargin", "withDivider", "focusable"];
-function ownKeys$G(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$G(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$G(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$G(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$H(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$H(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$H(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Dialog = function Dialog(props) {
   var children = props.children,
       title = props.title,
@@ -9960,7 +10109,7 @@ var Dialog = function Dialog(props) {
       event.stopPropagation();
     }
   };
-  return jsxs("div", _objectSpread$G(_objectSpread$G({
+  return jsxs("div", _objectSpread$H(_objectSpread$H({
     ref: dialogRef,
     role: "dialog",
     onSubmit: function onSubmit(event) {
@@ -10017,8 +10166,8 @@ var LoadingCircles = function LoadingCircles() {
 };
 
 var _excluded$s = ["id", "dist"];
-function ownKeys$F(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$F(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$F(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$G(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$G(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$G(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$G(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SELECTION_DISTANCE_COEFFICIENT = 0.4;
 var SELECTION_WITHIN_TEXT = 0;
 var findMaps = {
@@ -10353,7 +10502,7 @@ function findClosestItem(restruct, pos, maps, skip, scale) {
       var id = item.id,
           dist = item.dist,
           other = _objectWithoutProperties(item, _excluded$s);
-      return _objectSpread$F({
+      return _objectSpread$G({
         map: mp,
         id: id,
         dist: dist
@@ -10680,6 +10829,7 @@ var AtomTool = function () {
       type: 1,
       stereo: Bond$2.PATTERN.STEREO.NONE
     });
+    this.editor.hoverIcon.show().attr('text', "".concat(atomProps.label)).attr('fill', "".concat(ElementColor[atomProps.label]));
     if (editor.selection()) {
       var _editor$selection;
       if ((_editor$selection = editor.selection()) !== null && _editor$selection !== void 0 && _editor$selection.atoms) {
@@ -10763,12 +10913,31 @@ var AtomTool = function () {
         };
       }
     }
+  }, {
+    key: "mouseleave",
+    value: function mouseleave() {
+      this.editor.hoverIcon.hide();
+    }
+  }, {
+    key: "mouseover",
+    value: function mouseover() {
+      this.editor.hoverIcon.show();
+    }
   }, {
     key: "mousemove",
     value: function mousemove(event) {
       var rnd = this.editor.render;
+      var layerX = event.layerX,
+          layerY = event.layerY;
       if (!this.dragCtx || !this.dragCtx.item) {
-        this.editor.hover(this.editor.findItem(event, ['atoms', 'functionalGroups']));
+        var _this$editor$hoverIco = this.editor.hoverIcon.getBBox(),
+            height = _this$editor$hoverIco.height,
+            width = _this$editor$hoverIco.width;
+        this.editor.hoverIcon.attr({
+          x: layerX - width / 2,
+          y: layerY - height / 2
+        });
+        this.editor.hover(this.editor.findItem(event, ['atoms', 'functionalGroups']), null, event);
         return;
       }
       var dragCtx = this.dragCtx;
@@ -11170,12 +11339,16 @@ var BondTool = function () {
               beginPos = utils.calcNewAtomPos(atom === null || atom === void 0 ? void 0 : atom.pp.get_xy0(), xy1, event.ctrlKey);
             }
           }
-          if (dist > 0.3) dragCtx.action = fromBondAddition(rnd.ctab, this.bondProps, beginAtom, endAtom, beginPos, endPos)[0];else delete dragCtx.action;
+          if (dist > 0.3) {
+            dragCtx.action = fromBondAddition(rnd.ctab, this.bondProps, beginAtom, endAtom, beginPos, endPos)[0];
+          } else {
+            delete dragCtx.action;
+          }
           this.editor.update(dragCtx.action, true);
           return true;
         }
       }
-      this.editor.hover(this.editor.findItem(event, ['atoms', 'bonds']));
+      this.editor.hover(this.editor.findItem(event, ['atoms', 'bonds']), null, event);
       return true;
     }
   }, {
@@ -11309,7 +11482,7 @@ var ChainTool = function () {
       var editor = this.editor;
       var restruct = editor.render.ctab;
       var dragCtx = this.dragCtx;
-      editor.hover(this.editor.findItem(event, ['atoms', 'bonds']));
+      editor.hover(this.editor.findItem(event, ['atoms', 'bonds']), null, event);
       if (!dragCtx) {
         return true;
       }
@@ -11443,7 +11616,7 @@ var ChargeTool = function () {
       if (ci && ci.map === 'atoms' && Elements.get((_molecule$atoms$get = molecule.atoms.get(ci.id)) === null || _molecule$atoms$get === void 0 ? void 0 : _molecule$atoms$get.label)) {
         this.editor.hover(ci);
       } else {
-        this.editor.hover(null);
+        this.editor.hover(null, null, event);
       }
       return true;
     }
@@ -12225,6 +12398,7 @@ function sgroupDialog(editor, id, defaultType) {
   var type = sg ? sg.type : defaultType;
   var eventName = type === 'DAT' ? 'sdataEdit' : 'sgroupEdit';
   if (!selection.atoms && !selection.bonds && !sg) {
+    console.info('There is no selection or sgroup');
     return;
   }
   var attrs;
@@ -12343,8 +12517,8 @@ function countOfSelectedComponents(restruct, atoms) {
   }, 0);
 }
 
-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 ownKeys$F(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$F(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$F(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createForOfIteratorHelper$6(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$6(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$6(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$6(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$6(o, minLen); }
 function _arrayLikeToArray$6(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
@@ -12528,7 +12702,7 @@ var SelectTool = function () {
         return true;
       }
       var maps = _classPrivateFieldGet(this, _lassoHelper).fragment || event.ctrlKey ? ['frags', 'sgroups', 'functionalGroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'] : ['atoms', 'bonds', 'sgroups', 'functionalGroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'];
-      editor.hover(editor.findItem(event, maps, null));
+      editor.hover(editor.findItem(event, maps, null), null, event);
       return true;
     }
   }, {
@@ -12614,6 +12788,16 @@ var SelectTool = function () {
       }
       var dragCtx = this.dragCtx;
       if (dragCtx && dragCtx.stopTapping) dragCtx.stopTapping();
+      var possibleSaltOrSolvent = struct.sgroups.get(actualSgroupId);
+      var isDraggingSaltOrSolventOnStructure = SGroup.isSaltOrSolvent(possibleSaltOrSolvent === null || possibleSaltOrSolvent === void 0 ? void 0 : possibleSaltOrSolvent.item.data.name);
+      if ((isDraggingSaltOrSolventOnStructure || this.isDraggingStructureOnSaltOrSolvent(dragCtx, struct.sgroups)) && dragCtx) {
+        preventSaltAndSolventsMerge(struct, dragCtx, editor);
+        delete this.dragCtx;
+        if (_classPrivateFieldGet(this, _lassoHelper).running()) {
+          this.selectElementsOnCanvas(newSelected, editor, event);
+        }
+        return true;
+      }
       if (dragCtx && dragCtx.item) {
         dragCtx.action = dragCtx.action ? fromItemsFuse(struct, dragCtx.mergeItems).mergeWith(dragCtx.action) : fromItemsFuse(struct, dragCtx.mergeItems);
         editor.hover(null);
@@ -12621,8 +12805,7 @@ var SelectTool = function () {
         if (dragCtx.action.operations.length !== 0) editor.update(dragCtx.action);
         delete this.dragCtx;
       } else if (_classPrivateFieldGet(this, _lassoHelper).running()) {
-        var sel = newSelected.atoms.length > 0 ? selMerge(_classPrivateFieldGet(this, _lassoHelper).end(), newSelected, false) : _classPrivateFieldGet(this, _lassoHelper).end();
-        editor.selection(!event.shiftKey ? sel : selMerge(sel, editor.selection(), false));
+        this.selectElementsOnCanvas(newSelected, editor, event);
       } else if (_classPrivateFieldGet(this, _lassoHelper).fragment) {
         if (!event.shiftKey) editor.selection(null);
       }
@@ -12738,7 +12921,7 @@ var SelectTool = function () {
       } else if (ci.map === 'texts') {
         editor.selection(closestToSel(ci));
         var text = molecule.texts.get(ci.id);
-        var dialog = editor.event.elementEdit.dispatch(_objectSpread$E(_objectSpread$E({}, text), {}, {
+        var dialog = editor.event.elementEdit.dispatch(_objectSpread$F(_objectSpread$F({}, text), {}, {
           type: 'text'
         }));
         dialog.then(function (_ref) {
@@ -12766,6 +12949,33 @@ var SelectTool = function () {
       delete this.dragCtx;
       this.editor.hover(null);
     }
+  }, {
+    key: "selectElementsOnCanvas",
+    value: function selectElementsOnCanvas(elements, editor, event) {
+      var sel = elements.atoms.length > 0 ? selMerge(_classPrivateFieldGet(this, _lassoHelper).end(), elements, false) : _classPrivateFieldGet(this, _lassoHelper).end();
+      editor.selection(!event.shiftKey ? sel : selMerge(sel, editor.selection(), false));
+    }
+  }, {
+    key: "isDraggingStructureOnSaltOrSolvent",
+    value: function isDraggingStructureOnSaltOrSolvent(dragCtx, sgroups) {
+      var isDraggingOnSaltOrSolventAtom;
+      var isDraggingOnSaltOrSolventBond;
+      if (dragCtx !== null && dragCtx !== void 0 && dragCtx.mergeItems) {
+        var mergeAtoms = Array.from(dragCtx.mergeItems.atoms.values());
+        var mergeBonds = Array.from(dragCtx.mergeItems.bonds.values());
+        var sgroupsOnCanvas = Array.from(sgroups.values()).map(function (_ref2) {
+          var item = _ref2.item;
+          return item;
+        });
+        isDraggingOnSaltOrSolventAtom = mergeAtoms.some(function (atomId) {
+          return SGroup.isAtomInSaltOrSolvent(atomId, sgroupsOnCanvas);
+        });
+        isDraggingOnSaltOrSolventBond = mergeBonds.some(function (bondId) {
+          return SGroup.isBondInSaltOrSolvent(bondId, sgroupsOnCanvas);
+        });
+      }
+      return isDraggingOnSaltOrSolventAtom || isDraggingOnSaltOrSolventBond;
+    }
   }]);
   return SelectTool;
 }();
@@ -12791,6 +13001,17 @@ function uniqArray(dest, add, reversible) {
     return dest;
   }, []);
 }
+function preventSaltAndSolventsMerge(struct, dragCtx, editor) {
+  var action = dragCtx.action ? fromItemsFuse(struct, null).mergeWith(dragCtx.action) : fromItemsFuse(struct, null);
+  editor.hover(null);
+  if (dragCtx.mergeItems) {
+    editor.selection(null);
+  }
+  editor.update(action);
+  editor.event.message.dispatch({
+    info: false
+  });
+}
 
 function _createForOfIteratorHelper$5(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$5(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$5(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$5(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$5(o, minLen); }
@@ -13055,6 +13276,7 @@ var EraserTool = function () {
       } else if (ci.map === 'texts') {
         this.editor.update(fromTextDeletion(restruct, ci.id));
       } else {
+        console.error('EraserTool: unable to delete the object ' + ci.map + '[' + ci.id + ']');
         return;
       }
       this.editor.selection(null);
@@ -13589,7 +13811,7 @@ var ReactionArrowTool = function () {
         }
       } else {
         var items = this.editor.findItem(event, ['rxnArrows']);
-        this.editor.hover(items);
+        this.editor.hover(items, null, event);
       }
     }
   }, {
@@ -14294,7 +14516,7 @@ var TemplateTool = function () {
     value: function mousemove(event) {
       var restruct = this.editor.render.ctab;
       if (!this.dragCtx) {
-        this.editor.hover(this.editor.findItem(event, this.findItems));
+        this.editor.hover(this.editor.findItem(event, this.findItems), null, event);
         return true;
       }
       var dragCtx = this.dragCtx;
@@ -14400,6 +14622,10 @@ var TemplateTool = function () {
       }
       var action;
       var pasteItems = null;
+      if (SGroup.isSaltOrSolvent(this.template.molecule.name)) {
+        addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor);
+        return true;
+      }
       if (!dragCtx.action) {
         if (!ci) {
           var _fromTemplateOnCanvas3 = fromTemplateOnCanvas(restruct, this.template, dragCtx.xy0, 0);
@@ -14447,11 +14673,15 @@ var TemplateTool = function () {
         }
       }
       this.editor.selection(null);
-      if (!dragCtx.mergeItems && pasteItems && this.mode !== 'fg') dragCtx.mergeItems = getItemsToFuse(this.editor, pasteItems);
+      if (!dragCtx.mergeItems && pasteItems && this.mode !== 'fg') {
+        dragCtx.mergeItems = getItemsToFuse(this.editor, pasteItems);
+      }
       dragCtx.action = dragCtx.action ? fromItemsFuse(restruct, dragCtx.mergeItems).mergeWith(dragCtx.action) : fromItemsFuse(restruct, dragCtx.mergeItems);
       this.editor.hover(null);
       var completeAction = dragCtx.action;
-      if (completeAction && !completeAction.isDummy()) this.editor.update(completeAction);
+      if (completeAction && !completeAction.isDummy()) {
+        this.editor.update(completeAction);
+      }
       this.editor.event.message.dispatch({
         info: false
       });
@@ -14470,6 +14700,17 @@ var TemplateTool = function () {
   }]);
   return TemplateTool;
 }();
+function addSaltsAndSolventsOnCanvasWithoutMerge(restruct, template, dragCtx, editor) {
+  var _fromTemplateOnCanvas5 = fromTemplateOnCanvas(restruct, template, dragCtx.xy0, 0),
+      _fromTemplateOnCanvas6 = _slicedToArray(_fromTemplateOnCanvas5, 1),
+      action = _fromTemplateOnCanvas6[0];
+  editor.update(action);
+  editor.selection(null);
+  editor.hover(null);
+  editor.event.message.dispatch({
+    info: false
+  });
+}
 function getSign(molecule, bond, v) {
   var begin = molecule.atoms.get(bond.begin).pp;
   var end = molecule.atoms.get(bond.end).pp;
@@ -14517,7 +14758,7 @@ var TextTool = function () {
         this.dragCtx.action = fromMultipleMove(render.ctab, this.editor.selection() || {}, render.page2obj(event).sub(this.dragCtx.xy0));
         this.editor.update(this.dragCtx.action, true);
       } else {
-        this.editor.hover(this.editor.findItem(event, ['texts']));
+        this.editor.hover(this.editor.findItem(event, ['texts']), null, event);
       }
     }
   }, {
@@ -14695,6 +14936,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 var SCALE = 40;
 var HISTORY_SIZE = 32;
+var HOVER_ICON_OPACITY = 0.7;
 var structObjects = ['atoms', 'bonds', 'frags', 'sgroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'];
 var highlightTargets = ['atoms', 'bonds', 'rxnArrows', 'rxnPluses', 'functionalGroups', 'frags', 'merge', 'rgroups', 'sgroups', 'sgroupData', 'enhancedFlags', 'simpleObjects', 'texts'];
 function selectStereoFlagsIfNecessary(atoms, expAtoms) {
@@ -14731,6 +14973,7 @@ var Editor$3 = function () {
     this.highlights = new Highlighter(this);
     this.renderAndRecoordinateStruct = this.renderAndRecoordinateStruct.bind(this);
     this.setOptions = this.setOptions.bind(this);
+    this.hoverIcon = this.render.paper.text(0, 0, '').attr('font-size', options.fontsz).attr('opacity', HOVER_ICON_OPACITY);
     this.event = {
       message: new Subscription(),
       elementEdit: new PipelineSubscription(),
@@ -14747,7 +14990,8 @@ var Editor$3 = function () {
       dearomatizeStruct: new PipelineSubscription(),
       enhancedStereoEdit: new PipelineSubscription(),
       confirm: new PipelineSubscription(),
-      cursor: new PipelineSubscription()
+      cursor: new PipelineSubscription(),
+      showInfo: new PipelineSubscription()
     };
     domEventSetup(this, clientArea);
   }
@@ -14777,6 +15021,10 @@ var Editor$3 = function () {
         this._tool.cancel();
       }
       var tool = new tools[name](this, opts);
+      var isAtomToolChosen = name === 'atom';
+      if (!isAtomToolChosen) {
+        this.hoverIcon.hide();
+      }
       if (!tool || tool.isNotActiveTool) {
         return null;
       }
@@ -14793,8 +15041,8 @@ var Editor$3 = function () {
     value: function renderAndRecoordinateStruct(struct) {
       var action = fromNewCanvas(this.render.ctab, struct);
       this.update(action);
-      getStructCenter(this.render.ctab);
-      recoordinate(this);
+      var structCenter = getStructCenter(this.render.ctab);
+      recoordinate(this, structCenter);
       return this.render.ctab.molecule;
     }
   }, {
@@ -14843,8 +15091,8 @@ var Editor$3 = function () {
       }
       this.render.setZoom(value);
       var selection = this.selection();
-      getStructCenter(this.render.ctab, selection);
-      recoordinate(this);
+      var structCenter = getStructCenter(this.render.ctab, selection);
+      recoordinate(this, structCenter);
       this.render.update();
       return this.render.options.zoom;
     }
@@ -14889,13 +15137,35 @@ var Editor$3 = function () {
     }
   }, {
     key: "hover",
-    value: function hover(ci, newTool) {
+    value: function hover(ci, newTool, event) {
       var tool = newTool || this._tool;
+      var infoPanelData = null;
       if ('ci' in tool && (!ci || tool.ci.map !== ci.map || tool.ci.id !== ci.id)) {
         setHover(tool.ci, false, this.render);
         delete tool.ci;
       }
       if (ci && setHover(ci, true, this.render)) tool.ci = ci;
+      if (!event) return;
+      var checkFunctionGroupTypes = ['sgroups', 'functionalGroups'];
+      var closestCollapsibleStructures = this.findItem(event, checkFunctionGroupTypes);
+      if (closestCollapsibleStructures) {
+        var _this$struct;
+        var sGroup = (_this$struct = this.struct()) === null || _this$struct === void 0 ? void 0 : _this$struct.sgroups.get(closestCollapsibleStructures.id);
+        if (sGroup && !sGroup.data.expanded) {
+          var groupName = sGroup.data.name;
+          var groupStruct = FunctionalGroup.getFunctionalGroupByName(groupName);
+          infoPanelData = {
+            groupStruct: groupStruct,
+            event: event,
+            sGroup: sGroup
+          };
+        }
+      }
+      if (infoPanelData) {
+        this.event.showInfo.dispatch(infoPanelData);
+      } else {
+        this.event.showInfo.dispatch(null);
+      }
     }
   }, {
     key: "update",
@@ -15082,7 +15352,12 @@ function domEventSetup(editor, clientArea) {
 }
 function recoordinate(editor, rp
 ) {
-  editor.render.setScrollOffset(0, 0);
+  console.assert(rp, 'Reference point not specified');
+  if (rp) {
+    editor.render.setScrollOffset(rp.x, rp.y);
+  } else {
+    editor.render.setScrollOffset(0, 0);
+  }
 }
 function getStructCenter(ReStruct, selection) {
   var bb = ReStruct.getVBoxObj(selection || {});
@@ -15124,11 +15399,12 @@ function setHover(ci, visible, render) {
   return true;
 }
 
-var classes$D = {"isHidden":"ContextMenu-module_isHidden__eOjF4"};
+var classes$E = {"isHidden":"ContextMenu-module_isHidden__eOjF4"};
 
 var FGContextMenu = function FGContextMenu() {
   var _useAppContext = useAppContext(),
       getKetcherInstance = _useAppContext.getKetcherInstance;
+  var dispatch = useDispatch();
   var handleExpand = function handleExpand() {
     var editor = getKetcherInstance().editor;
     var action = new Action();
@@ -15141,6 +15417,10 @@ var FGContextMenu = function FGContextMenu() {
     editor.update(action);
     setShowSGroupMenu(false);
     setTargetItems([]);
+    highlightFG(dispatch, {
+      group: null,
+      id: null
+    });
   };
   var handleRemove = function handleRemove() {
     var editor = getKetcherInstance().editor;
@@ -15222,7 +15502,7 @@ var FGContextMenu = function FGContextMenu() {
     onShow: function onShow(e) {
       return showMenu(e);
     },
-    className: clsx(_defineProperty({}, classes$D.isHidden, !showSGroupMenu)),
+    className: clsx(_defineProperty({}, classes$E.isHidden, !showSGroupMenu)),
     children: [jsxs(MenuItem, {
       onClick: handleExpand,
       children: [targetItems.length && targetItems[0].isExpanded ? 'Contract ' : 'Expand ', "Abbreviation"]
@@ -15235,7 +15515,7 @@ var FGContextMenu = function FGContextMenu() {
   });
 };
 
-var classes$C = {"button-common-styles":"StructEditor-module_button-common-styles__3P7PO","scrollbar":"StructEditor-module_scrollbar__SUs-o","spinnerOverlay":"StructEditor-module_spinnerOverlay__5H1IM","canvas":"StructEditor-module_canvas__LLnzh","measureLog":"StructEditor-module_measureLog__B2wuy","visible":"StructEditor-module_visible__3eFNB","intermediateCanvas":"StructEditor-module_intermediateCanvas__fR3ws","enableCursor":"StructEditor-module_enableCursor__Qla0A"};
+var classes$D = {"button-common-styles":"StructEditor-module_button-common-styles__3P7PO","scrollbar":"StructEditor-module_scrollbar__SUs-o","spinnerOverlay":"StructEditor-module_spinnerOverlay__5H1IM","canvas":"StructEditor-module_canvas__LLnzh","measureLog":"StructEditor-module_measureLog__B2wuy","visible":"StructEditor-module_visible__3eFNB","intermediateCanvas":"StructEditor-module_intermediateCanvas__fR3ws","enableCursor":"StructEditor-module_enableCursor__Qla0A"};
 
 var Cursor = function Cursor(_ref) {
   var Icon = _ref.Icon,
@@ -15307,38 +15587,269 @@ var Cursor = function Cursor(_ref) {
   });
 };
 
-var _excluded$r = ["Tag", "struct", "tool", "toolOpts", "options", "onInit", "onSelectionChange", "onElementEdit", "onEnhancedStereoEdit", "onQuickEdit", "onBondEdit", "onRgroupEdit", "onSgroupEdit", "onSdataEdit", "onRemoveFG", "onMessage", "onAromatizeStruct", "onDearomatizeStruct", "onAttachEdit", "indigoVerification", "onCipChange", "className", "onConfirm", "showAttachmentPoints"];
-function ownKeys$D(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$D(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$D(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$D(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 setupEditor(editor, props) {
-  var oldProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var struct = props.struct,
-      tool = props.tool,
-      toolOpts = props.toolOpts,
-      options = props.options;
-  if (struct !== oldProps.struct) editor.struct(struct);
-  if (tool !== oldProps.tool || toolOpts !== oldProps.toolOpts) {
-    editor.tool(tool, toolOpts);
-    if (toolOpts !== oldProps.toolOpts) {
-      editor.event.message.dispatch({
-        info: JSON.stringify(toolOpts)
-      });
-    }
+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;
   }
-  if (oldProps.options && options !== oldProps.options) editor.options(options);
-  Object.keys(editor.event).forEach(function (name) {
-    var eventName = "on".concat(upperFirst(name));
-    if (props[eventName] !== oldProps[eventName]) {
-      if (oldProps[eventName]) {
-        editor.event[name].remove(oldProps[eventName]);
-      }
-      if (props[eventName]) {
-        editor.event[name].add(props[eventName]);
-      }
-    }
-  });
+  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);
+  }
+}
+var StructRender = function (_Component) {
+  _inherits(StructRender, _Component);
+  var _super = _createSuper$a(StructRender);
+  function StructRender(props) {
+    var _this;
+    _classCallCheck(this, StructRender);
+    _this = _super.call(this, props);
+    _this.tagRef = createRef();
+    return _this;
+  }
+  _createClass(StructRender, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(previousProps) {
+      return Boolean(this.props.id && this.props.id !== previousProps.id);
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      var el = this.tagRef.current;
+      var _this$props = this.props,
+          struct = _this$props.struct,
+          options = _this$props.options;
+      var parsedStruct;
+      if (!(struct instanceof Struct)) {
+        try {
+          var molSerialzer = new MolSerializer();
+          parsedStruct = molSerialzer.deserialize(struct);
+        } catch (e) {
+          parsedStruct = null;
+        }
+      } else {
+        parsedStruct = struct;
+      }
+      el === null || el === void 0 ? void 0 : el.childNodes.forEach(function (node) {
+        node.remove();
+      });
+      renderStruct(el, parsedStruct, options);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.update();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.update();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          struct = _this$props2.struct,
+          _this$props2$Tag = _this$props2.Tag,
+          Tag = _this$props2$Tag === void 0 ? 'div' : _this$props2$Tag,
+          props = _objectWithoutProperties(_this$props2, _excluded$r);
+      return jsx(Tag, _objectSpread$E(_objectSpread$E({
+        ref: this.tagRef
+      }, props), {}, {
+        children: struct ? null : 'No molecule'
+      }));
+    }
+  }]);
+  return StructRender;
+}(Component);
+
+var functionalGroupsSelector = function functionalGroupsSelector(state) {
+  return state.functionalGroups.lib;
+};
+var functionGroupInfoSelector = function functionGroupInfoSelector(state) {
+  return state.functionalGroups.functionalGroupInfo;
+};
+
+var classes$C = {"infoPanel":"InfoPanel-module_infoPanel__irvZL"};
+
+function ownKeys$D(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$D(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$D(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$D(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var HOVER_DELAY = 400;
+var HOVER_PANEL_PADDING = 20;
+function getSGroupFirstAtom(sGroup, render) {
+  var _render$ctab$atoms, _render$ctab$atoms$ge;
+  var firstSgroupAtom = sGroup.firstSgroupAtom;
+  if (firstSgroupAtom) return firstSgroupAtom.pp;
+  var _sGroup$atoms = _slicedToArray(sGroup.atoms, 1),
+      firstAtomId = _sGroup$atoms[0];
+  return ((_render$ctab$atoms = render.ctab.atoms) === null || _render$ctab$atoms === void 0 ? void 0 : (_render$ctab$atoms$ge = _render$ctab$atoms.get(firstAtomId)) === null || _render$ctab$atoms$ge === void 0 ? void 0 : _render$ctab$atoms$ge.a.pp) || new Vec2(0, 0);
+}
+function getPanelPosition(clientX, clientY, render, sGroup) {
+  var width = 0;
+  var height = 0;
+  var x = 0;
+  var y = 0;
+  if (sGroup) {
+    var _render$clientArea, _render$clientArea2, _render$options$offse, _render$clientArea3, _render$options, _render$options$offse2, _render$clientArea4;
+    var groupBoundingBox = sGroup.areas[0];
+    var start = Scale.obj2scaled(groupBoundingBox.p0, render.options);
+    var end = Scale.obj2scaled(groupBoundingBox.p1, render.options);
+    width = end.x - start.x;
+    height = end.y - start.y;
+    var firstAtomPosition = getSGroupFirstAtom(sGroup, render);
+    var panelPosition = Scale.obj2scaled(firstAtomPosition, {
+      scale: render.options.scale * render.options.zoom
+    });
+    x = panelPosition.x - width / 2 - HOVER_PANEL_PADDING;
+    y = panelPosition.y + HOVER_PANEL_PADDING;
+    var viewportRightLimit = (render === null || render === void 0 ? void 0 : (_render$clientArea = render.clientArea) === null || _render$clientArea === void 0 ? void 0 : _render$clientArea.clientWidth) - width / 2;
+    var viewportLeftLimit = HOVER_PANEL_PADDING * 2 + width / 2;
+    var viewportBottomLimit = (render === null || render === void 0 ? void 0 : (_render$clientArea2 = render.clientArea) === null || _render$clientArea2 === void 0 ? void 0 : _render$clientArea2.clientHeight) - height;
+    if (clientX > viewportRightLimit) {
+      x = panelPosition.x - width - HOVER_PANEL_PADDING;
+    } else if (clientX < viewportLeftLimit) {
+      x = panelPosition.x - HOVER_PANEL_PADDING;
+    }
+    if (clientY > viewportBottomLimit) {
+      y = panelPosition.y - height - HOVER_PANEL_PADDING * 3;
+    }
+    var scrollOffsetX = (render === null || render === void 0 ? void 0 : (_render$options$offse = render.options.offset) === null || _render$options$offse === void 0 ? void 0 : _render$options$offse.x) - (render === null || render === void 0 ? void 0 : (_render$clientArea3 = render.clientArea) === null || _render$clientArea3 === void 0 ? void 0 : _render$clientArea3.scrollLeft);
+    var scrollOffsetY = (render === null || render === void 0 ? void 0 : (_render$options = render.options) === null || _render$options === void 0 ? void 0 : (_render$options$offse2 = _render$options.offset) === null || _render$options$offse2 === void 0 ? void 0 : _render$options$offse2.y) - (render === null || render === void 0 ? void 0 : (_render$clientArea4 = render.clientArea) === null || _render$clientArea4 === void 0 ? void 0 : _render$clientArea4.scrollTop);
+    x += scrollOffsetX;
+    y += scrollOffsetY;
+  }
+  return [new Vec2(x, y), new Vec2(width, height)];
+}
+var InfoPanel = function InfoPanel(props) {
+  var _sGroup$data;
+  var _props$clientX = props.clientX,
+      clientX = _props$clientX === void 0 ? 0 : _props$clientX,
+      _props$clientY = props.clientY,
+      clientY = _props$clientY === void 0 ? 0 : _props$clientY,
+      render = props.render,
+      className = props.className,
+      groupStruct = props.groupStruct,
+      sGroup = props.sGroup;
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      molecule = _useState2[0],
+      setMolecule = _useState2[1];
+  var childRef = useRef(null);
+  var groupName = sGroup === null || sGroup === void 0 ? void 0 : (_sGroup$data = sGroup.data) === null || _sGroup$data === void 0 ? void 0 : _sGroup$data.name;
+  var timer;
+  useEffect(function () {
+    if (groupStruct) {
+      timer = setTimeout(function () {
+        setMolecule(groupStruct.clone());
+      }, HOVER_DELAY);
+    } else {
+      setMolecule(null);
+    }
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [groupName]);
+  var _getPanelPosition = getPanelPosition(clientX, clientY, render, sGroup),
+      _getPanelPosition2 = _slicedToArray(_getPanelPosition, 2),
+      position = _getPanelPosition2[0],
+      size = _getPanelPosition2[1];
+  var x = position.x,
+      y = position.y;
+  var width = size.x;
+  var height = size.y;
+  return molecule && jsx("div", {
+    style: {
+      left: x + 'px',
+      top: y + 'px'
+    },
+    className: clsx(classes$C.infoPanel, className),
+    children: jsx(StructRender, _objectSpread$D(_objectSpread$D({
+      struct: molecule
+    }, props), {}, {
+      id: groupName,
+      ref: childRef,
+      options: _objectSpread$D(_objectSpread$D({}, render.options), {}, {
+        autoScale: true,
+        autoScaleMargin: 0,
+        rescaleAmount: 1,
+        cachePrefix: 'infoPanel',
+        viewSz: new Vec2(width, height),
+        width: width,
+        height: height
+      })
+    }))
+  });
+};
+var InfoPanel$1 = connect(function (store) {
+  var _functionGroupInfoSel, _functionGroupInfoSel2, _functionGroupInfoSel3, _functionGroupInfoSel4, _functionGroupInfoSel5, _functionGroupInfoSel6, _store$editor, _store$editor$render, _store$editor$render$;
+  return {
+    clientX: ((_functionGroupInfoSel = functionGroupInfoSelector(store)) === null || _functionGroupInfoSel === void 0 ? void 0 : (_functionGroupInfoSel2 = _functionGroupInfoSel.event) === null || _functionGroupInfoSel2 === void 0 ? void 0 : _functionGroupInfoSel2.clientX) || 0,
+    clientY: ((_functionGroupInfoSel3 = functionGroupInfoSelector(store)) === null || _functionGroupInfoSel3 === void 0 ? void 0 : (_functionGroupInfoSel4 = _functionGroupInfoSel3.event) === null || _functionGroupInfoSel4 === void 0 ? void 0 : _functionGroupInfoSel4.clientY) || 0,
+    groupStruct: ((_functionGroupInfoSel5 = functionGroupInfoSelector(store)) === null || _functionGroupInfoSel5 === void 0 ? void 0 : _functionGroupInfoSel5.groupStruct) || null,
+    sGroup: ((_functionGroupInfoSel6 = functionGroupInfoSelector(store)) === null || _functionGroupInfoSel6 === void 0 ? void 0 : _functionGroupInfoSel6.sGroup) || null,
+    render: (_store$editor = store.editor) === null || _store$editor === void 0 ? void 0 : (_store$editor$render = _store$editor.render) === null || _store$editor$render === void 0 ? void 0 : (_store$editor$render$ = _store$editor$render.ctab) === null || _store$editor$render$ === void 0 ? void 0 : _store$editor$render$.render
+  };
+})(InfoPanel);
+
+var _excluded$q = ["Tag", "struct", "tool", "toolOpts", "options", "onInit", "onSelectionChange", "onElementEdit", "onEnhancedStereoEdit", "onQuickEdit", "onBondEdit", "onRgroupEdit", "onSgroupEdit", "onSdataEdit", "onRemoveFG", "onMessage", "onAromatizeStruct", "onDearomatizeStruct", "onAttachEdit", "indigoVerification", "onCipChange", "className", "onConfirm", "onShowInfo", "showAttachmentPoints"];
+function ownKeys$C(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$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); 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$9() { 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 setupEditor(editor, props) {
+  var oldProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var struct = props.struct,
+      tool = props.tool,
+      toolOpts = props.toolOpts,
+      options = props.options;
+  if (struct !== oldProps.struct) editor.struct(struct);
+  if (tool !== oldProps.tool || toolOpts !== oldProps.toolOpts) {
+    editor.tool(tool, toolOpts);
+    if (toolOpts !== oldProps.toolOpts) {
+      editor.event.message.dispatch({
+        info: JSON.stringify(toolOpts)
+      });
+    }
+  }
+  if (oldProps.options && options !== oldProps.options) editor.options(options);
+  Object.keys(editor.event).forEach(function (name) {
+    var eventName = "on".concat(upperFirst(name));
+    if (props[eventName] !== oldProps[eventName]) {
+      if (oldProps[eventName]) {
+        editor.event[name].remove(oldProps[eventName]);
+      }
+      if (props[eventName]) {
+        editor.event[name].add(props[eventName]);
+      }
+    }
+  });
 }
 function removeEditorHandlers(editor, props) {
   Object.keys(editor.event).forEach(function (name) {
@@ -15348,13 +15859,15 @@ function removeEditorHandlers(editor, props) {
 }
 var StructEditor = function (_Component) {
   _inherits(StructEditor, _Component);
-  var _super = _createSuper$a(StructEditor);
+  var _super = _createSuper$9(StructEditor);
   function StructEditor(props) {
     var _this;
     _classCallCheck(this, StructEditor);
     _this = _super.call(this, props);
     _this.state = {
-      enableCursor: false
+      enableCursor: false,
+      clientX: 0,
+      clientY: 0
     };
     _this.editorRef = createRef();
     _this.logRef = createRef();
@@ -15374,7 +15887,7 @@ var StructEditor = function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      this.editor = new Editor$3(this.editorRef.current, _objectSpread$D({}, this.props.options));
+      this.editor = new Editor$3(this.editorRef.current, _objectSpread$C({}, this.props.options));
       setupEditor(this.editor, this.props);
       if (this.props.onInit) this.props.onInit(this.editor);
       this.editor.event.message.add(function (msg) {
@@ -15386,15 +15899,15 @@ var StructEditor = function (_Component) {
           } catch (_unused) {
             el.innerHTML = msg.info;
           }
-          el.classList.add(classes$C.visible);
+          el.classList.add(classes$D.visible);
         } else {
-          el.classList.remove(classes$C.visible);
+          el.classList.remove(classes$D.visible);
         }
       });
       this.editor.event.cursor.add(function (csr) {
         switch (csr.status) {
           case 'enable':
-            _this2.editorRef.current.classList.add(classes$C.enableCursor);
+            _this2.editorRef.current.classList.add(classes$D.enableCursor);
             var _this2$editorRef$curr = _this2.editorRef.current.getBoundingClientRect(),
                 left = _this2$editorRef$curr.left,
                 top = _this2$editorRef$curr.top,
@@ -15411,25 +15924,27 @@ var StructEditor = function (_Component) {
             }
             break;
           case 'move':
-            _this2.editorRef.current.classList.add(classes$C.enableCursor);
+            _this2.editorRef.current.classList.add(classes$D.enableCursor);
             _this2.setState({
-              enableCursor: true
+              enableCursor: true,
+              clientX: clientX,
+              clientY: clientY
             });
             break;
           case 'disable':
-            _this2.editorRef.current.classList.remove(classes$C.enableCursor);
+            _this2.editorRef.current.classList.remove(classes$D.enableCursor);
             _this2.setState({
               enableCursor: false
             });
             break;
           case 'leave':
-            _this2.editorRef.current.classList.remove(classes$C.enableCursor);
+            _this2.editorRef.current.classList.remove(classes$D.enableCursor);
             _this2.setState({
               enableCursor: false
             });
             break;
           case 'mouseover':
-            _this2.editorRef.current.classList.add(classes$C.enableCursor);
+            _this2.editorRef.current.classList.add(classes$D.enableCursor);
             _this2.setState({
               enableCursor: true
             });
@@ -15473,10 +15988,11 @@ var StructEditor = function (_Component) {
           _this$props.onCipChange;
           var className = _this$props.className;
           _this$props.onConfirm;
+          _this$props.onShowInfo;
           _this$props.showAttachmentPoints;
-          var props = _objectWithoutProperties(_this$props, _excluded$r);
-      return jsxs(Tag, _objectSpread$D(_objectSpread$D({
-        className: clsx(classes$C.canvas, className),
+          var props = _objectWithoutProperties(_this$props, _excluded$q);
+      return jsxs(Tag, _objectSpread$C(_objectSpread$C({
+        className: clsx(classes$D.canvas, className),
         onMouseDown: function onMouseDown(event) {
           return event.preventDefault();
         }
@@ -15489,7 +16005,7 @@ var StructEditor = function (_Component) {
           holdToDisplay: -1,
           children: [jsx("div", {
             ref: this.editorRef,
-            className: clsx(classes$C.intermediateCanvas),
+            className: clsx(classes$D.intermediateCanvas),
             onMouseDown: function onMouseDown(event) {
               return event.preventDefault();
             }
@@ -15498,13 +16014,13 @@ var StructEditor = function (_Component) {
             PressedIcon: SvgCompressedHand,
             enableHandTool: this.state.enableCursor
           }), jsx("div", {
-            className: classes$C.measureLog,
+            className: classes$D.measureLog,
             ref: this.logRef
           }), indigoVerification && jsx("div", {
-            className: classes$C.spinnerOverlay,
+            className: classes$D.spinnerOverlay,
             children: jsx(LoadingCircles, {})
           })]
-        }), jsx(FGContextMenu, {})]
+        }), jsx(InfoPanel$1, _objectSpread$C(_objectSpread$C({}, this.state), this.props)), jsx(FGContextMenu, {})]
       }));
     }
   }]);
@@ -15697,19 +16213,19 @@ var ErrorPopover = function ErrorPopover(_ref) {
   });
 };
 
-var classes$A = {"fieldSetLabel":"input-module_fieldSetLabel__DxKa5","checkbox":"input-module_checkbox__CowSc","radioButton":"input-module_radioButton__2eHO0","slider":"input-module_slider__-Xsc0","select":"input-module_select__GhgBs","input":"input-module_input__WzHgL"};
+var classes$A = {"fieldSetLabel":"input-module_fieldSetLabel__DxKa5","input":"input-module_input__WzHgL","checkbox":"input-module_checkbox__CowSc","radioButton":"input-module_radioButton__2eHO0","slider":"input-module_slider__-Xsc0","select":"input-module_select__GhgBs","genericInput":"input-module_genericInput__XdZ2R"};
 
-var _excluded$q = ["schema", "value", "onChange", "type"],
-    _excluded2$5 = ["schema", "value", "onChange"],
+var _excluded$p = ["schema", "value", "onChange", "type", "isFocused"],
+    _excluded2$4 = ["schema", "value", "onChange"],
     _excluded3$1 = ["schema", "value", "onChange"],
     _excluded4$1 = ["schema", "value", "selected", "onSelect", "type", "checked"],
     _excluded5$1 = ["value", "onChange", "name"],
     _excluded6 = ["children", "onChange", "style"],
     _excluded7 = ["children", "onChange"];
-function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); 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$9() { 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$C(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$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); 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$8() { 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$B(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$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$B(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function GenericInput(_ref) {
   _ref.schema;
       var _ref$value = _ref.value,
@@ -15717,14 +16233,21 @@ function GenericInput(_ref) {
       onChange = _ref.onChange,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      _ref$isFocused = _ref.isFocused,
+      isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+      props = _objectWithoutProperties(_ref, _excluded$p);
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (inputRef.current && isFocused) inputRef.current.focus();
+  }, [inputRef, isFocused]);
   return jsxs(Fragment, {
-    children: [jsx("input", _objectSpread$C({
+    children: [jsx("input", _objectSpread$B({
       type: type,
       value: value,
       onInput: onChange,
       onChange: onChange,
-      className: classes$A.input
+      className: clsx(classes$A.input, classes$A.genericInput),
+      ref: inputRef
     }, props)), type === 'checkbox' && jsx("span", {
       className: classes$A.checkbox
     }), type === 'radio' && jsx("span", {
@@ -15742,8 +16265,8 @@ function TextArea(_ref2) {
   _ref2.schema;
       var value = _ref2.value,
       onChange = _ref2.onChange,
-      rest = _objectWithoutProperties(_ref2, _excluded2$5);
-  return jsx("textarea", _objectSpread$C({
+      rest = _objectWithoutProperties(_ref2, _excluded2$4);
+  return jsx("textarea", _objectSpread$B({
     value: value,
     onInput: onChange
   }, rest));
@@ -15759,11 +16282,12 @@ function CheckBox(_ref3) {
       rest = _objectWithoutProperties(_ref3, _excluded3$1);
   return jsxs("div", {
     className: classes$A.fieldSetItem,
-    children: [jsx("input", _objectSpread$C({
+    children: [jsx("input", _objectSpread$B({
       type: "checkbox",
       checked: value,
       onClick: onChange,
-      onChange: onChange
+      onChange: onChange,
+      className: classes$A.input
     }, rest)), jsx("span", {
       className: classes$A.checkbox
     })]
@@ -15813,16 +16337,16 @@ function FieldSet(_ref5) {
       rest = _objectWithoutProperties(_ref5, _excluded4$1);
   return jsx("fieldset", {
     onClick: onSelect,
-    className: "radio",
     children: enumSchema(schema, function (title, val) {
       return jsx("li", {
         className: classes$A.fieldSetItem,
         children: jsxs("label", {
           className: classes$A.fieldSetLabel,
-          children: [jsx("input", _objectSpread$C({
+          children: [jsx("input", _objectSpread$B({
             type: type,
             defaultChecked: type === 'radio' ? selected(val, checked) : selected(val, value),
-            value: _typeof(val) !== 'object' && val
+            value: _typeof(val) !== 'object' && val,
+            className: classes$A.input
           }, rest)), type === 'checkbox' && jsx("span", {
             className: classes$A.checkbox
           }), type === 'radio' && jsx("span", {
@@ -15852,7 +16376,7 @@ function Slider(_ref6) {
       rest = _objectWithoutProperties(_ref6, _excluded5$1);
   return jsxs("div", {
     className: classes$A.slider,
-    children: [jsx("input", _objectSpread$C({
+    children: [jsx("input", _objectSpread$B({
       type: "checkbox",
       checked: value,
       onClick: onChange,
@@ -15885,7 +16409,7 @@ function inputCtrl(component, schema, _onChange) {
       type: 'text'
     };
   }
-  return _objectSpread$C({
+  return _objectSpread$B({
     onChange: function onChange(ev) {
       var val = !component.val ? ev : component.val(ev, schema);
       _onChange(val);
@@ -15955,7 +16479,7 @@ function shallowCompare(a, b) {
 }
 var Input = function (_Component) {
   _inherits(Input, _Component);
-  var _super = _createSuper$9(Input);
+  var _super = _createSuper$8(Input);
   function Input() {
     _classCallCheck(this, Input);
     return _super.apply(this, arguments);
@@ -15981,7 +16505,7 @@ var Input = function (_Component) {
           _this$props.onChange;
           var props = _objectWithoutProperties(_this$props, _excluded7);
       var Component = this.component;
-      return jsx(Component, _objectSpread$C(_objectSpread$C({}, this.ctrl), props));
+      return jsx(Component, _objectSpread$B(_objectSpread$B({}, this.ctrl), props));
     }
   }]);
   return Input;
@@ -16064,17 +16588,18 @@ function fileOpener(server) {
   });
 }
 function throughFileReader(file) {
+  var isCDX = file.name.endsWith('cdx');
   return new Promise(function (resolve, reject) {
     var rd = new FileReader();
     rd.onload = function () {
-      var content = rd.result;
+      var content = isCDX ? rd.result.slice(37) : rd.result;
       if (file.msClose) file.msClose();
       resolve(content);
     };
     rd.onerror = function (event) {
       reject(event);
     };
-    rd.readAsText(file, 'UTF-8');
+    isCDX ? rd.readAsDataURL(file) : rd.readAsText(file, 'UTF-8');
   });
 }
 function throughFileSystemObject(fso, file) {
@@ -16099,18 +16624,28 @@ function greekify(str) {
   });
 }
 function filterLib(lib, filter$1) {
-  var re = new RegExp(escapeRegExp(greekify(filter$1)), 'i');
+  console.warn('Filter', filter$1);
+  var trimmedFilter = filter$1.trim();
+  var re = new RegExp(escapeRegExp(greekify(trimmedFilter)), 'i');
   return flow(filter(function (item) {
-    return !filter$1 || re.test(greekify(item.struct.name)) || re.test(greekify(item.props.group));
+    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 re = new RegExp(escapeRegExp(greekify(filter$1)), 'i');
+  console.warn('Filter', 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 !filter$1 || re.test(greekify(item.struct.name));
+    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;
@@ -16127,18 +16662,18 @@ var getSelectOptionsFromSchema = function getSelectOptionsFromSchema(schema) {
   }, []);
 };
 
-var _excluded$p = ["schema", "result", "customValid"],
-    _excluded2$4 = ["labelPos", "title", "children"],
+var _excluded$o = ["schema", "result", "customValid"],
+    _excluded2$3 = ["labelPos", "title", "children"],
     _excluded3 = ["name", "onChange", "component", "labelPos", "className"],
     _excluded4 = ["dataError"],
     _excluded5 = ["title", "name", "schema"];
-function ownKeys$B(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$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$B(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); 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$8() { 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$A(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$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); 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$7() { 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 Form = function (_Component) {
   _inherits(Form, _Component);
-  var _super = _createSuper$8(Form);
+  var _super = _createSuper$7(Form);
   function Form(props) {
     var _this;
     _classCallCheck(this, Form);
@@ -16153,7 +16688,7 @@ var Form = function (_Component) {
           valid = _this$schema$serializ.valid,
           errors = _this$schema$serializ.errors;
       var errs = getErrorsObj(errors);
-      var initialState = _objectSpread$B(_objectSpread$B({}, init), {}, {
+      var initialState = _objectSpread$A(_objectSpread$A({}, init), {}, {
         init: true
       });
       onUpdate(initialState, valid, errs);
@@ -16167,7 +16702,7 @@ var Form = function (_Component) {
           schema = _this$props2.schema,
           result = _this$props2.result;
           _this$props2.customValid;
-          var rest = _objectWithoutProperties(_this$props2, _excluded$p);
+          var rest = _objectWithoutProperties(_this$props2, _excluded$o);
       if (schema.key && schema.key !== prevProps.schema.key) {
         this.schema = propSchema(schema, rest);
         this.schema.serialize(result);
@@ -16237,8 +16772,8 @@ function Label(_ref) {
   var labelPos = _ref.labelPos,
       title = _ref.title,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded2$4);
-  return jsxs("label", _objectSpread$B(_objectSpread$B({}, props), {}, {
+      props = _objectWithoutProperties(_ref, _excluded2$3);
+  return jsxs("label", _objectSpread$A(_objectSpread$A({}, props), {}, {
     children: [title && labelPos !== 'after' ? jsx("span", {
       children: title
     }) : '', children, title && labelPos === 'after' ? jsx("span", {
@@ -16271,10 +16806,10 @@ function Field(props) {
       dataError = _stateStore$field.dataError,
       fieldOpts = _objectWithoutProperties(_stateStore$field, _excluded4);
   var Component = component;
-  var formField = component ? jsx(Component, _objectSpread$B(_objectSpread$B({
+  var formField = component ? jsx(Component, _objectSpread$A(_objectSpread$A({
     name: name,
     schema: desc
-  }, fieldOpts), rest)) : jsx(Input, _objectSpread$B(_objectSpread$B({
+  }, fieldOpts), rest)) : jsx(Input, _objectSpread$A(_objectSpread$A({
     name: name,
     schema: desc
   }, fieldOpts), rest));
@@ -16311,7 +16846,7 @@ var SelectOneOf = function SelectOneOf(props) {
     selectDesc["enum"].push(item);
     selectDesc.enumNames.push(schema[item].title || item);
   });
-  return jsx(Field, _objectSpread$B(_objectSpread$B({
+  return jsx(Field, _objectSpread$A(_objectSpread$A({
     name: name,
     options: getSelectOptionsFromSchema(selectDesc),
     title: title
@@ -16334,7 +16869,7 @@ function propSchema(schema, _ref2) {
     schema = Object.assign({}, schema);
     schema.properties = Object.keys(customValid).reduce(function (res, prop) {
       ajv.addFormat(customValid[prop].name, customValid[prop]);
-      res[prop] = _objectSpread$B({
+      res[prop] = _objectSpread$A({
         format: prop
       }, res[prop]);
       return res;
@@ -16496,9 +17031,9 @@ var ColorPicker = function ColorPicker(props) {
 
 var styles$a = {"measureInput":"measure-input-module_measureInput__uZQ-j","select":"measure-input-module_select__1ZFmv"};
 
-var _excluded$o = ["schema", "value", "onChange", "name"];
-function ownKeys$A(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$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$n = ["schema", "value", "onChange", "name"];
+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 selectOptions$1 = getSelectOptionsFromSchema({
   "enum": ['cm', 'px', 'pt', 'inch']
 });
@@ -16507,7 +17042,7 @@ var MeasureInput = function MeasureInput(_ref) {
       value = _ref.value,
       onChange = _ref.onChange,
       name = _ref.name,
-      rest = _objectWithoutProperties(_ref, _excluded$o);
+      rest = _objectWithoutProperties(_ref, _excluded$n);
   var _useState = useState('px'),
       _useState2 = _slicedToArray(_useState, 2),
       measure = _useState2[0],
@@ -16541,7 +17076,7 @@ var MeasureInput = function MeasureInput(_ref) {
     calcValue();
   }, [value, measure, calcValue]);
   var desc = schema || schema.properties[name];
-  return jsxs("div", _objectSpread$A(_objectSpread$A({
+  return jsxs("div", _objectSpread$z(_objectSpread$z({
     className: styles$a.measureInput
   }, rest), {}, {
     children: [jsx("span", {
@@ -16577,14 +17112,14 @@ function convertValue(value, measureFrom, measureTo) {
 
 var classes$x = {"button-common-styles":"buttons-module_button-common-styles__qWDOz","scrollbar":"buttons-module_scrollbar__SpaVV","openButton":"buttons-module_openButton__wErm9"};
 
-var _excluded$n = ["children", "type", "server", "className"];
-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 _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); 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$7() { 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 _excluded$m = ["children", "type", "server", "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 _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); 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$6() { 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 OpenButton = function (_Component) {
   _inherits(OpenButton, _Component);
-  var _super = _createSuper$7(OpenButton);
+  var _super = _createSuper$6(OpenButton);
   function OpenButton(props) {
     var _this;
     _classCallCheck(this, OpenButton);
@@ -16624,8 +17159,8 @@ var OpenButton = function (_Component) {
           type = _this$props2.type;
           _this$props2.server;
           var className = _this$props2.className,
-          props = _objectWithoutProperties(_this$props2, _excluded$n);
-      return jsxs("button", _objectSpread$z(_objectSpread$z({
+          props = _objectWithoutProperties(_this$props2, _excluded$m);
+      return jsxs("button", _objectSpread$y(_objectSpread$y({
         onClick: function onClick() {
           return _this2.btn.click();
         },
@@ -16647,8 +17182,8 @@ var OpenButton = function (_Component) {
   return OpenButton;
 }(Component);
 
-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$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; }
 var SaveButton$1 = function SaveButton(props) {
   var noop = function noop() {
     return null;
@@ -16702,7 +17237,7 @@ var SaveButton$1 = function SaveButton(props) {
       onError(error);
     });
   };
-  return jsx("button", _objectSpread$y(_objectSpread$y({
+  return jsx("button", _objectSpread$x(_objectSpread$x({
     className: className,
     onClick: function onClick(event) {
       save(event);
@@ -16881,9 +17416,9 @@ var fieldGroups = {
   showLoopIds: 'Options for Debugging'
 };
 
-var _excluded$m = ["initState", "formState", "server", "onOpenFile", "onReset", "appOpts"];
-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; }
+var _excluded$l = ["initState", "formState", "server", "onOpenFile", "onReset", "appOpts"];
+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; }
 var defaultSettings = getDefaultOptions();
 var HeaderContent$1 = function HeaderContent(_ref) {
   var server = _ref.server,
@@ -16934,7 +17469,7 @@ var SettingsDialog = function SettingsDialog(props) {
       onOpenFile = props.onOpenFile,
       onReset = props.onReset,
       appOpts = props.appOpts,
-      prop = _objectWithoutProperties(props, _excluded$m);
+      prop = _objectWithoutProperties(props, _excluded$l);
   var _useState = useState(new Set()),
       _useState2 = _slicedToArray(_useState, 2),
       changedGroups = _useState2[0],
@@ -17128,7 +17663,7 @@ var SettingsDialog = function SettingsDialog(props) {
       formState: formState,
       initState: initState
     }),
-    children: jsx(Form$1, _objectSpread$x(_objectSpread$x({
+    children: jsx(Form$1, _objectSpread$w(_objectSpread$w({
       schema: optionsSchema,
       init: initState
     }, formState), {}, {
@@ -17156,6 +17691,7 @@ var mapDispatchToProps$b = function mapDispatchToProps(dispatch, ownProps) {
           result: JSON.parse(newOpts)
         }));
       } catch (ex) {
+        console.info('Bad file');
       }
     },
     onReset: function onReset() {
@@ -17199,9 +17735,9 @@ function ErrorsCheck(props) {
 
 var style = {"button-common-styles":"Check-module_button-common-styles__WPocW","scrollbar":"Check-module_scrollbar__3jzOc","dialog_body":"Check-module_dialog_body__wHZMM","buttons":"Check-module_buttons__cjuqO","buttonSecondary":"Check-module_buttonSecondary__2482r","buttonPrimary":"Check-module_buttonPrimary__1h5p1","buttonsRight":"Check-module_buttonsRight__L1v9A","wrapper":"Check-module_wrapper__27SOp","checkInfo":"Check-module_checkInfo__Iqq6t","settings":"Check-module_settings__knuQF","warnings":"Check-module_warnings__b4ozd","centeredContainer":"Check-module_centeredContainer__t61r8","warningsContainer":"Check-module_warningsContainer__vSbyK","checkBoxesDisabled":"Check-module_checkBoxesDisabled__EAdRo"};
 
-var _excluded$l = ["formState", "checkState", "onCheck", "onApply", "onCancel"];
-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; }
+var _excluded$k = ["formState", "checkState", "onCheck", "onApply", "onCancel"];
+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 checkSchema = {
   title: 'Check',
   type: 'object',
@@ -17259,7 +17795,7 @@ function CheckDialog(props) {
       onCheck = props.onCheck,
       onApply = props.onApply,
       onCancel = props.onCancel,
-      restProps = _objectWithoutProperties(props, _excluded$l);
+      restProps = _objectWithoutProperties(props, _excluded$k);
   var _formState$result = formState.result,
       result = _formState$result === void 0 ? checkState : _formState$result,
       moleculeErrors = formState.moleculeErrors;
@@ -17295,7 +17831,7 @@ function CheckDialog(props) {
   return jsx(Dialog, {
     title: "Structure Check",
     className: style.dialog_body,
-    params: _objectSpread$w(_objectSpread$w({}, restProps), {}, {
+    params: _objectSpread$v(_objectSpread$v({}, restProps), {}, {
       onCancel: onCancel
     }),
     buttons: [],
@@ -17307,7 +17843,7 @@ function CheckDialog(props) {
       isCheckedWithNewSettings: isCheckedWithNewSettings
     }),
     withDivider: true,
-    children: jsx(Form$1, _objectSpread$w(_objectSpread$w({
+    children: jsx(Form$1, _objectSpread$v(_objectSpread$v({
       schema: checkSchema,
       init: checkState
     }, formState), {}, {
@@ -17433,9 +17969,9 @@ function FrozenInput(_ref) {
 
 var classes$u = {"button-common-styles":"Analyse-module_button-common-styles__8No07","scrollbar":"Analyse-module_scrollbar__UAaIN","analyse":"Analyse-module_analyse__MR-Tu","inputWrapper":"Analyse-module_inputWrapper__uR995","contentWrapper":"Analyse-module_contentWrapper__B4WCi","selectWrapper":"Analyse-module_selectWrapper__xEkKL","select":"Analyse-module_select__c6hFt"};
 
-var _excluded$k = ["values", "round", "loading", "onAnalyse", "onChangeRound"];
-function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); 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$6() { 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 _excluded$j = ["values", "round", "loading", "onAnalyse", "onChangeRound"];
+function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); 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$5() { 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 roundOff(value, round) {
   if (typeof value === 'number') return value.toFixed(round);
   return value.replace(/[0-9]*\.[0-9]+/g, function (str) {
@@ -17447,7 +17983,7 @@ var selectOptions = getSelectOptionsFromSchema({
 });
 var AnalyseDialog = function (_Component) {
   _inherits(AnalyseDialog, _Component);
-  var _super = _createSuper$6(AnalyseDialog);
+  var _super = _createSuper$5(AnalyseDialog);
   function AnalyseDialog() {
     _classCallCheck(this, AnalyseDialog);
     return _super.apply(this, arguments);
@@ -17466,7 +18002,7 @@ var AnalyseDialog = function (_Component) {
           loading = _this$props.loading;
           _this$props.onAnalyse;
           var onChangeRound = _this$props.onChangeRound,
-          props = _objectWithoutProperties(_this$props, _excluded$k);
+          props = _objectWithoutProperties(_this$props, _excluded$j);
       return jsx(Dialog, {
         title: "Calculated Values",
         className: classes$u.analyse,
@@ -17561,80 +18097,6 @@ var mapDispatchToProps$9 = function mapDispatchToProps(dispatch) {
 };
 var Analyse = connect(mapStateToProps$c, mapDispatchToProps$9)(AnalyseDialog);
 
-var _excluded$j = ["struct", "Tag"];
-function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); 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$5() { 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$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 renderStruct(el, struct) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (el) {
-    if (struct) {
-      struct.initHalfBonds();
-      struct.initNeighbors();
-      struct.setImplicitHydrogen();
-      struct.markFragments();
-      var rnd = new Render(el, _objectSpread$v({
-        autoScale: true
-      }, options));
-      rnd.setMolecule(struct);
-      rnd.update();
-    }
-  }
-}
-var StructRender = function (_Component) {
-  _inherits(StructRender, _Component);
-  var _super = _createSuper$5(StructRender);
-  function StructRender(props) {
-    var _this;
-    _classCallCheck(this, StructRender);
-    _this = _super.call(this, props);
-    _this.tagRef = createRef();
-    return _this;
-  }
-  _createClass(StructRender, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate() {
-      return false;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var el = this.tagRef.current;
-      var _this$props = this.props,
-          struct = _this$props.struct,
-          options = _this$props.options;
-      var parsedStruct;
-      if (!(struct instanceof Struct)) {
-        try {
-          var molSerialzer = new MolSerializer();
-          parsedStruct = molSerialzer.deserialize(struct);
-        } catch (e) {
-          parsedStruct = null;
-        }
-      } else {
-        parsedStruct = struct;
-      }
-      renderStruct(el, parsedStruct, options);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          struct = _this$props2.struct,
-          _this$props2$Tag = _this$props2.Tag,
-          Tag = _this$props2$Tag === void 0 ? 'div' : _this$props2$Tag,
-          props = _objectWithoutProperties(_this$props2, _excluded$j);
-      return jsx(Tag, _objectSpread$v(_objectSpread$v({
-        ref: this.tagRef
-      }, props), {}, {
-        children: struct ? null : 'No molecule'
-      }));
-    }
-  }]);
-  return StructRender;
-}(Component);
-
 var classes$t = {"button-common-styles":"Recognize-module_button-common-styles__B04E6","scrollbar":"Recognize-module_scrollbar__rohcP","recognize":"Recognize-module_recognize__66jG2","footerContent":"Recognize-module_footerContent__0MAC7","imagoVersion":"Recognize-module_imagoVersion__nBIj6","openButton":"Recognize-module_openButton__H-j5I","imagesContainer":"Recognize-module_imagesContainer__rXWWk","topBody":"Recognize-module_topBody__ZCCjN","output":"Recognize-module_output__WgRnP","picture":"Recognize-module_picture__x2Y7S","filename":"Recognize-module_filename__-1HIU","messageContainer":"Recognize-module_messageContainer__tMvyb","primaryButton":"Recognize-module_primaryButton__rzm03","secondaryButton":"Recognize-module_secondaryButton__H1Q28","struct":"Recognize-module_struct__W55TL"};
 
 var DialogActionButton = function DialogActionButton(_ref) {
@@ -17654,7 +18116,7 @@ var DialogActionButton = function DialogActionButton(_ref) {
 };
 
 var _excluded$i = ["file", "structStr", "fragment", "version", "imagoVersions", "onOk"],
-    _excluded2$3 = ["onRecognize", "isFragment", "onImage", "onChangeImago"];
+    _excluded2$2 = ["onRecognize", "isFragment", "onImage", "onChangeImago"];
 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 isImage(file) {
@@ -17705,7 +18167,7 @@ function RecognizeDialog(prop) {
       partProps.isFragment;
       var onImage = partProps.onImage,
       onChangeImago = partProps.onChangeImago,
-      props = _objectWithoutProperties(partProps, _excluded2$3);
+      props = _objectWithoutProperties(partProps, _excluded2$2);
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       canPreviewImage = _useState2[0],
@@ -17924,7 +18386,7 @@ var MiewDialog = function MiewDialog(_ref) {
   var onMiewInit = useCallback(function (miew) {
     miewRef.current = miew;
     var factory = new FormatterFactory(server);
-    var service = factory.create('cml');
+    var service = factory.create(SupportedFormat.cml);
     service.getStructureFromStructAsync(struct).then(function (res) {
       return miew.load(res, {
         sourceType: 'immediate',
@@ -17933,7 +18395,7 @@ var MiewDialog = function MiewDialog(_ref) {
     }).then(function () {
       return miew.setOptions(miewOpts);
     })["catch"](function (ex) {
-      return (void 0);
+      return console.error(ex.message);
     });
   }, [miewOpts, server, struct]);
   var exportCML = useCallback(function () {
@@ -19164,7 +19626,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,
@@ -20289,51 +20752,27 @@ var Rgroup = connect(function (store) {
 
 var classes$9 = {"button-common-styles":"sgroup-module_button-common-styles__MAeEP","scrollbar":"sgroup-module_scrollbar__T3fpf","sgroup":"sgroup-module_sgroup__Kh2Xj"};
 
-var _excluded$5 = ["title", "name", "schema"],
-    _excluded2$2 = ["context", "fieldName", "fieldValue", "type", "radiobuttons", "formState"];
+var _excluded$5 = ["context", "fieldName", "fieldValue", "type", "radiobuttons", "formState"];
 function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function SelectInput(_ref) {
-  var title = _ref.title,
-      name = _ref.name,
-      schema = _ref.schema,
+function SData(_ref) {
+  var context = _ref.context,
+      fieldName = _ref.fieldName,
+      fieldValue = _ref.fieldValue,
+      type = _ref.type,
+      radiobuttons = _ref.radiobuttons,
+      formState = _ref.formState,
       prop = _objectWithoutProperties(_ref, _excluded$5);
-  var inputSelect = Object.keys(schema).reduce(function (acc, item) {
-    acc["enum"].push(item);
-    acc.enumNames.push(schema[item].title || item);
-    return acc;
-  }, {
-    title: title,
-    type: 'string',
-    "default": '',
-    minLength: 1,
-    "enum": [],
-    enumNames: []
-  });
-  return jsx(Field, _objectSpread$8({
-    name: name,
-    options: getSelectOptionsFromSchema(inputSelect),
-    component: Select
-  }, prop));
-}
-function SData(_ref2) {
-  var context = _ref2.context,
-      fieldName = _ref2.fieldName,
-      fieldValue = _ref2.fieldValue,
-      type = _ref2.type,
-      radiobuttons = _ref2.radiobuttons,
-      formState = _ref2.formState,
-      prop = _objectWithoutProperties(_ref2, _excluded2$2);
   var _result = formState.result,
       _valid = formState.valid;
+  var formSchema = sdataCustomSchema;
   var init = {
-    context: context,
-    fieldName: fieldName || getSdataDefault(context),
+    context: context || getSdataDefault(formSchema, 'context'),
+    fieldName: fieldName || getSdataDefault(formSchema, 'fieldName'),
     type: type,
-    radiobuttons: radiobuttons
+    radiobuttons: radiobuttons || getSdataDefault(formSchema, 'radiobuttons')
   };
-  init.fieldValue = fieldValue || getSdataDefault(context, init.fieldName);
-  var formSchema = sdataSchema[_result.context][_result.fieldName] || sdataCustomSchema;
+  init.fieldValue = fieldValue || getSdataDefault(formSchema, 'fieldValue');
   var serialize = {
     context: _result.context.trim(),
     fieldName: _result.fieldName.trim(),
@@ -20361,20 +20800,20 @@ function SData(_ref2) {
       init: init
     }, formState), {}, {
       children: jsxs("fieldset", {
-        children: [jsx(SelectOneOf, {
-          title: "Context",
+        className: "sdata",
+        children: [jsx(Field, {
           name: "context",
-          schema: sdataSchema
-        }), jsx(SelectInput, {
-          title: "Field name",
+          options: getSelectOptionsFromSchema(formSchema.properties.context),
+          component: Select
+        }), jsx(Field, {
           name: "fieldName",
-          schema: sdataSchema[_result.context]
-        }), content$1(formSchema, _result.context, _result.fieldName, radiobuttons)]
+          placeholder: "Enter name"
+        }), content$1(formSchema, _result.context, _result.fieldName, _result.fieldValue, radiobuttons)]
       })
     }))
   });
 }
-var content$1 = function content(schema, context, fieldName, checked) {
+var content$1 = function content(schema, context, fieldName, fieldValue, checked) {
   return Object.keys(schema.properties).filter(function (prop) {
     return prop !== 'type' && prop !== 'context' && prop !== 'fieldName';
   }).map(function (prop) {
@@ -20383,10 +20822,9 @@ var content$1 = function content(schema, context, fieldName, checked) {
       checked: checked,
       type: "radio",
       labelPos: false
-    }, "".concat(context, "-").concat(fieldName, "-").concat(prop, "-radio")) : prop === 'fieldValue' && schema.properties.fieldValue["enum"] ? jsx(Field, {
-      options: getSelectOptionsFromSchema(schema.properties.fieldValue),
+    }, "".concat(context, "-").concat(fieldName, "-").concat(prop, "-radio")) : prop === 'fieldValue' ? jsx(Field, {
       name: prop,
-      component: Select
+      placeholder: "Enter value"
     }, "".concat(context, "-").concat(fieldName, "-").concat(prop, "-select")) : jsx(Field, {
       name: prop,
       type: "textarea"
@@ -20695,7 +21133,22 @@ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) {
 var getSettingsSelector = function getSettingsSelector(state) {
   return state.options.settings;
 };
+var isSaltOrSolventTemplate = function isSaltOrSolventTemplate(template) {
+  return template.props.group === 'Salts and Solvents';
+};
+var isFunctionalGroupTemplate = function isFunctionalGroupTemplate(template) {
+  return template.props.group === 'Functional Groups';
+};
+function getTemplateTitle(template, index) {
+  if (isSaltOrSolventTemplate(template)) {
+    return template.props.name;
+  }
+  return template.struct.name || "".concat(template.props.group, " template ").concat(index + 1);
+}
 function tmplName(tmpl, i) {
+  if (isSaltOrSolventTemplate(tmpl)) {
+    return tmpl.props.abbreviation;
+  }
   return tmpl.struct.name || "".concat(tmpl.props.group, " template ").concat(i + 1);
 }
 var RenderTmpl = function RenderTmpl(_ref) {
@@ -20703,7 +21156,7 @@ var RenderTmpl = function RenderTmpl(_ref) {
       options = _ref.options,
       props = _objectWithoutProperties(_ref, _excluded$2);
   return jsx(StructRender, _objectSpread$5({
-    struct: tmpl.modifiedStruct || tmpl.struct,
+    struct: tmpl.struct,
     options: _objectSpread$5(_objectSpread$5({}, options), {}, {
       autoScaleMargin: 15
     })
@@ -20715,7 +21168,6 @@ var TemplateTable = function TemplateTable(props) {
       onSelect = props.onSelect,
       onDelete = props.onDelete,
       onAttach = props.onAttach,
-      _onDoubleClick = props.onDoubleClick,
       _props$titleRows = props.titleRows,
       titleRows = _props$titleRows === void 0 ? 2 : _props$titleRows;
   var options = useSelector(function (state) {
@@ -20726,13 +21178,10 @@ var TemplateTable = function TemplateTable(props) {
     children: templates.map(function (tmpl, i) {
       return jsxs("div", {
         className: tmpl.struct !== (selected === null || selected === void 0 ? void 0 : selected.struct) ? classes$7.td : "".concat(classes$7.td, " ").concat(classes$7.selected),
-        title: greekify(tmplName(tmpl, i)),
+        title: greekify(getTemplateTitle(tmpl, i)),
         onClick: function onClick() {
           return onSelect(tmpl);
         },
-        onDoubleClick: function onDoubleClick() {
-          return _onDoubleClick(tmpl);
-        },
         children: [jsx(RenderTmpl, {
           tmpl: tmpl,
           options: options,
@@ -20748,7 +21197,7 @@ var TemplateTable = function TemplateTable(props) {
           children: jsx(Icon, {
             name: "delete"
           })
-        }), tmpl.props.group !== 'Functional Groups' && jsx("button", {
+        }), !isFunctionalGroupTemplate(tmpl) && !isSaltOrSolventTemplate(tmpl) && jsx("button", {
           className: "".concat(classes$7.button, " ").concat(classes$7.editButton),
           onClick: function onClick() {
             return onAttach(tmpl);
@@ -20762,8 +21211,8 @@ var TemplateTable = function TemplateTable(props) {
   });
 };
 
-var functionalGroupsSelector = function functionalGroupsSelector(state) {
-  return state.functionalGroups.lib;
+var saltsAndSolventsSelector = function saltsAndSolventsSelector(state) {
+  return state.saltsAndSolvents.lib;
 };
 
 var classes$6 = {"emptySearch":"emptySearchResult-module_emptySearch__aUSew"};
@@ -20781,7 +21230,7 @@ var EmptySearchResult = function EmptySearchResult(_ref) {
 };
 
 var _excluded$1 = ["children", "value", "index"],
-    _excluded2 = ["filter", "onFilter", "onChangeGroup", "mode", "initialTab", "functionalGroups", "lib"];
+    _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; }
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function TabPanel(props) {
@@ -20809,6 +21258,7 @@ var TemplateTabs;
 (function (TemplateTabs) {
   TemplateTabs[TemplateTabs["TemplateLibrary"] = 0] = "TemplateLibrary";
   TemplateTabs[TemplateTabs["FunctionalGroupLibrary"] = 1] = "FunctionalGroupLibrary";
+  TemplateTabs[TemplateTabs["SaltsAndSolvents"] = 2] = "SaltsAndSolvents";
 })(TemplateTabs || (TemplateTabs = {}));
 var filterLibSelector = createSelector(function (props) {
   return props.lib;
@@ -20816,6 +21266,7 @@ 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,
@@ -20829,26 +21280,37 @@ var HeaderContent = function HeaderContent() {
 var FooterContent = function FooterContent(_ref) {
   var data = _ref.data,
       tab = _ref.tab;
-  return jsx("div", {
+  var clickToAddToCanvas = jsx("span", {
+    children: "Click to add to canvas"
+  });
+  if (tab === TemplateTabs.SaltsAndSolvents) {
+    return clickToAddToCanvas;
+  }
+  return jsxs("div", {
     style: {
-      flexGrow: 1
+      flexGrow: 1,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
     },
-    children: jsx(SaveButton$1, {
+    children: [jsx(SaveButton$1, {
       data: data,
       className: classes$8.saveButton,
       filename: tab === TemplateTabs.TemplateLibrary ? 'ketcher-tmpls.sdf' : 'ketcher-fg-tmpls.sdf',
-      children: tab === TemplateTabs.TemplateLibrary ? 'Save template library to SDF' : 'Save functional groups to SDF'
-    }, "save-to-SDF")
+      children: "Save to SDF"
+    }, "save-to-SDF"), clickToAddToCanvas]
   });
 };
 var TemplateDialog = function TemplateDialog(props) {
+  var _serializerMapper;
   var filter = props.filter,
       onFilter = props.onFilter,
-      onChangeGroup = props.onChangeGroup,
-      mode = props.mode,
-      initialTab = props.initialTab,
+      onChangeGroup = props.onChangeGroup;
+      props.mode;
+      var initialTab = props.initialTab,
       functionalGroups = props.functionalGroups,
       templateLib = props.lib,
+      saltsAndSolvents = props.saltsAndSolvents,
       rest = _objectWithoutProperties(props, _excluded2);
   var _useState = useState(initialTab !== null && initialTab !== void 0 ? initialTab : TemplateTabs.TemplateLibrary),
       _useState2 = _slicedToArray(_useState, 2),
@@ -20862,10 +21324,17 @@ var TemplateDialog = function TemplateDialog(props) {
       _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);
@@ -20877,21 +21346,12 @@ var TemplateDialog = function TemplateDialog(props) {
       }));
     };
   };
-  var _result = function result() {
-    var tmpl = props.selected;
-    return tmpl ? {
-      struct: tmpl.struct,
-      aid: parseInt(String(tmpl.props.atomid)) || null,
-      bid: parseInt(String(tmpl.props.bondid)) || null,
-      mode: mode
-    } : null;
-  };
   var sdfSerializer = new SdfSerializer();
-  var data = tab === TemplateTabs.TemplateLibrary ? sdfSerializer.serialize(templateLib) : sdfSerializer.serialize(functionalGroups);
+  var serializerMapper = (_serializerMapper = {}, _defineProperty(_serializerMapper, TemplateTabs.TemplateLibrary, templateLib), _defineProperty(_serializerMapper, TemplateTabs.FunctionalGroupLibrary, functionalGroups), _defineProperty(_serializerMapper, TemplateTabs.SaltsAndSolvents, saltsAndSolvents), _serializerMapper);
+  var data = sdfSerializer.serialize(serializerMapper[tab]);
   var select = function select(tmpl) {
-    var activateImmediately = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     onChangeGroup(tmpl.props.group);
-    if (activateImmediately) props.onOk(_result());else props.onSelect(tmpl);
+    props.onSelect(tmpl);
   };
   return jsxs(Dialog, {
     headerContent: jsx(HeaderContent, {}),
@@ -20901,13 +21361,7 @@ var TemplateDialog = function TemplateDialog(props) {
     }),
     className: "".concat(classes$8.dialog_body),
     params: omit(['group'], rest),
-    result: function result() {
-      return _result();
-    },
-    buttons: ['OK'],
-    buttonsNameMap: {
-      OK: 'Add to canvas'
-    },
+    buttons: [],
     needMargin: false,
     children: [jsxs("div", {
       className: classes$8.inputContainer,
@@ -20918,7 +21372,8 @@ var TemplateDialog = function TemplateDialog(props) {
         onChange: function onChange(value) {
           return onFilter(value);
         },
-        placeholder: "Search by elements..."
+        placeholder: "Search by elements...",
+        isFocused: true
       }), jsx(Icon, {
         name: "search",
         className: classes$8.searchIcon
@@ -20931,7 +21386,9 @@ var TemplateDialog = function TemplateDialog(props) {
         label: "Template Library"
       }, a11yProps(TemplateTabs.TemplateLibrary))), jsx(Tab, _objectSpread$4({
         label: "Functional Groups"
-      }, a11yProps(TemplateTabs.FunctionalGroupLibrary)))]
+      }, a11yProps(TemplateTabs.FunctionalGroupLibrary))), jsx(Tab, _objectSpread$4({
+        label: "Salts and Solvents"
+      }, a11yProps(TemplateTabs.SaltsAndSolvents)))]
     }), jsxs("div", {
       className: classes$8.tabsContent,
       children: [jsx(TabPanel, {
@@ -20960,9 +21417,6 @@ var TemplateDialog = function TemplateDialog(props) {
                   onSelect: function onSelect(templ) {
                     return select(templ);
                   },
-                  onDoubleClick: function onDoubleClick(templ) {
-                    return select(templ, true);
-                  },
                   selected: props.selected,
                   onDelete: props.onDelete,
                   onAttach: props.onAttach
@@ -20983,9 +21437,6 @@ var TemplateDialog = function TemplateDialog(props) {
           className: classes$8.resultsContainer,
           children: jsx(TemplateTable, {
             titleRows: 1,
-            onDoubleClick: function onDoubleClick(templ) {
-              return select(templ, true);
-            },
             templates: filteredFG,
             onSelect: function onSelect(templ) {
               return select(templ);
@@ -20998,21 +21449,45 @@ var TemplateDialog = function TemplateDialog(props) {
             textInfo: "No items found"
           })
         })
+      }), jsx(TabPanel, {
+        value: tab,
+        index: TemplateTabs.SaltsAndSolvents,
+        children: filteredSaltsAndSolvents !== null && filteredSaltsAndSolvents !== void 0 && filteredSaltsAndSolvents.length ? jsx("div", {
+          className: classes$8.resultsContainer,
+          children: jsx(TemplateTable, {
+            titleRows: 1,
+            templates: filteredSaltsAndSolvents,
+            onSelect: function onSelect(templ) {
+              return select(templ);
+            },
+            selected: props.selected
+          })
+        }) : jsx("div", {
+          className: classes$8.resultsContainer,
+          children: jsx(EmptySearchResult, {
+            textInfo: "No items found"
+          })
+        })
       })]
     })]
   });
 };
+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)), {}, {
     initialTab: (_store$modal = store.modal) === null || _store$modal === void 0 ? void 0 : (_store$modal$prop = _store$modal.prop) === null || _store$modal$prop === void 0 ? void 0 : _store$modal$prop.tab,
-    functionalGroups: functionalGroupsSelector(store).map(function (template) {
-      var struct = template.struct.clone();
-      struct.sgroups["delete"](0);
-      return _objectSpread$4(_objectSpread$4({}, template), {}, {
-        modifiedStruct: struct
-      });
-    })
+    functionalGroups: functionalGroupsSelector(store),
+    saltsAndSolvents: saltsAndSolventsSelector(store)
   });
 }, function (dispatch, props) {
   return {
@@ -21020,7 +21495,7 @@ var TemplatesDialog = connect(function (store) {
       return dispatch(changeFilter(filter));
     },
     onSelect: function onSelect(tmpl) {
-      return dispatch(selectTmpl(tmpl));
+      return selectTemplate(tmpl, props, dispatch);
     },
     onChangeGroup: function onChangeGroup(group) {
       return dispatch(changeGroup(group));
@@ -21030,13 +21505,6 @@ var TemplatesDialog = connect(function (store) {
     },
     onDelete: function onDelete(tmpl) {
       return dispatch(deleteTmpl(tmpl));
-    },
-    onOk: function onOk(res) {
-      dispatch(onAction({
-        tool: 'template',
-        opts: res
-      }));
-      props.onOk(res);
     }
   };
 })(TemplateDialog);
@@ -21400,10 +21868,10 @@ function Modal(props) {
   var Component = modals[modal.name];
   if (!Component) throw new Error("There is no modal window named ".concat(modal.name));
   return jsx("div", {
-    className: clsx(classes$E.modalOverlay, selectClasses.selectContainer),
+    className: clsx(classes$F.modalOverlay, selectClasses.selectContainer),
     ref: containerRef,
     children: jsx(Component, _objectSpread$3({
-      className: clsx(_defineProperty({}, classes$E.smallScreen, height && height <= mediaSizes$1.smallHeight || width && width <= mediaSizes$1.smallWidth))
+      className: clsx(_defineProperty({}, classes$F.smallScreen, height && height <= mediaSizes$1.smallHeight || width && width <= mediaSizes$1.smallWidth))
     }, rest))
   });
 }
@@ -21612,6 +22080,24 @@ function initEditor(dispatch, getState) {
     },
     onConfirm: function onConfirm() {
       return openDialog(dispatch, 'confirm');
+    },
+    onShowInfo: function onShowInfo(payload) {
+      if (payload) {
+        var groupStruct = payload.groupStruct,
+            event = payload.event,
+            sGroup = payload.sGroup;
+        highlightFG(dispatch, {
+          groupStruct: groupStruct,
+          event: event,
+          sGroup: sGroup
+        });
+      } else {
+        highlightFG(dispatch, {
+          groupStruct: null,
+          event: null,
+          sGroup: null
+        });
+      }
     }
   };
 }
@@ -21645,6 +22131,8 @@ var App = function App(props) {
   useEffect(function () {
     checkServer();
     dispatch(initFGTemplates(staticResourcesUrl));
+    dispatch(initSaltsAndSolventsTemplates(staticResourcesUrl));
+    window.scrollTo(0, 0);
   }, []);
   return jsx(ThemeProvider, {
     theme: muiTheme,
@@ -21753,8 +22241,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.6.4" ,
-                    buildDate: "2022-12-01T13:14:40" ,
+                    version: "2.7.0-rc.2" ,
+                    buildDate: "2022-12-16T15:41:03" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });