#2093 combine s group menus and remove generic s group

packages/ketcher-react/src/icons/index.tsx

@@ -102,7 +102,6 @@ import SelectFragmentIcon from './files/select-fragment.svg'
 import SelectLassoIcon from './files/select-lasso.svg'
 import SelectRectangleIcon from './files/select-rectangle.svg'
 import SettingsIcon from './files/settings.svg'
-import SgroupDataIcon from './files/sgroup-data.svg'
 import SgroupIcon from './files/sgroup.svg'
 import ShapeEllipseIcon from './files/shape-ellipse.svg'
 import ShapeLineIcon from './files/shape-line.svg'
@@ -349,7 +348,6 @@ const icons = {
   'select-lasso': SelectLassoIcon,
   'select-rectangle': SelectRectangleIcon,
   settings: SettingsIcon,
-  'sgroup-data': SgroupDataIcon,
   sgroup: SgroupIcon,
   'template-0': Template0Icon,
   'template-1': Template1Icon,

packages/ketcher-react/src/script/builders/ketcher/ButtonName.ts

@@ -32,7 +32,6 @@ export type ButtonName =
   // left
   // sgroup group
   | 'sgroup'
-  | 'sgroup-data'
   // reaction
   // plus
   | 'reaction-plus'

packages/ketcher-react/src/script/editor/tool/select.ts

@@ -547,7 +547,7 @@ class SelectTool {
       ci.map === 'sgroupData'
     ) {
       editor.selection(closestToSel(ci))
-      SGroupTool.sgroupDialog(editor, ci.id, null)
+      SGroupTool.sgroupDialog(editor, ci.id)
     } else if (ci.map === 'texts') {
       editor.selection(closestToSel(ci))
       const text = molecule.texts.get(ci.id)

packages/ketcher-react/src/script/editor/tool/sgroup.ts

@@ -41,13 +41,11 @@ const searchMaps = [
 
 class SGroupTool {
   editor: Editor
-  type: any
   lassoHelper: any
   isNotActiveTool: boolean | undefined
 
-  constructor(editor, type) {
+  constructor(editor) {
     this.editor = editor
-    this.type = type
     this.lassoHelper = new LassoHelper(1, editor, null)
 
     this.checkSelection()
@@ -143,7 +141,7 @@ class SGroupTool {
         return
       }
 
-      SGroupTool.sgroupDialog(this.editor, id ?? null, this.type)
+      SGroupTool.sgroupDialog(this.editor, id ?? null)
       this.isNotActiveTool = true
     }
   }
@@ -448,7 +446,7 @@ class SGroupTool {
     // TODO: handle click on an existing group?
     if (id !== null || isAtomsOrBondsSelected) {
       this.editor.selection(selection)
-      SGroupTool.sgroupDialog(this.editor, id, this.type)
+      SGroupTool.sgroupDialog(this.editor, id)
     }
   }
 
@@ -459,13 +457,11 @@ class SGroupTool {
     this.editor.selection(null)
   }
 
-  static sgroupDialog(editor, id, defaultType) {
+  static sgroupDialog(editor, id) {
     const restruct = editor.render.ctab
     const struct = restruct.molecule
     const selection = editor.selection() || {}
     const sg = id !== null ? struct.sgroups.get(id) : null
-    const type = sg ? sg.type : defaultType
-    const eventName = type === 'DAT' ? 'sdataEdit' : 'sgroupEdit'
 
     let attrs
     if (sg) {
@@ -477,8 +473,8 @@ class SGroupTool {
       }
     }
 
-    const res = editor.event[eventName].dispatch({
-      type,
+    const res = editor.event.sgroupEdit.dispatch({
+      type: sg?.type,
       attrs
     })
 

packages/ketcher-react/src/script/ui/action/action.types.ts

@@ -75,7 +75,6 @@ type ToolVariant =
   | 'select-rectangle'
   | 'settings'
   | 'sgroup'
-  | 'sgroup-data'
   | 'template-0'
   | 'template-1'
   | 'template-2'

packages/ketcher-react/src/script/ui/action/tools.js

@@ -108,12 +108,6 @@ const toolActions = {
     action: { tool: 'sgroup' },
     hidden: (options) => isHidden(options, 'sgroup')
   },
-  'sgroup-data': {
-    shortcut: 'Mod+g',
-    title: 'Data S-Group',
-    action: { tool: 'sgroup', opts: 'DAT' },
-    hidden: (options) => isHidden(options, 'sgroup-data')
-  },
   arrows: {
     hidden: (options) => isHidden(options, 'arrows')
   },

packages/ketcher-react/src/script/ui/data/convert/structconv.js

@@ -18,7 +18,11 @@ import { AtomList, Bond, Elements, StereoLabel } from 'ketcher-core'
 
 import { atom as atomSchema } from '../schema/struct-schema'
 import { capitalize } from 'lodash/fp'
-import { sdataSchema } from '../schema/sdata-schema'
+import {
+  sdataSchema,
+  getSdataDefault,
+  sdataCustomSchema
+} from '../schema/sdata-schema'
 
 const DefaultStereoGroupNumber = 1
 
@@ -291,7 +295,7 @@ const bondCaptionMap = {
 }
 
 export function fromSgroup(ssgroup) {
-  const type = ssgroup.type || 'GEN'
+  const type = ssgroup.type || 'DAT'
   const { context, fieldName, fieldValue, absolute, attached } = ssgroup.attrs
 
   if (absolute === false && attached === false)
@@ -304,7 +308,18 @@ export function fromSgroup(ssgroup) {
   )
     ssgroup.attrs.fieldValue = fieldValue.split('\n')
 
-  return Object.assign({ type }, ssgroup.attrs)
+  const sDataInitValue =
+    type === 'DAT'
+      ? {
+          context: context || getSdataDefault(sdataCustomSchema, 'context'),
+          fieldName:
+            fieldName || getSdataDefault(sdataCustomSchema, 'fieldName'),
+          fieldValue:
+            fieldValue || getSdataDefault(sdataCustomSchema, 'fieldValue')
+        }
+      : {}
+
+  return Object.assign({ type }, ssgroup.attrs, sDataInitValue)
 }
 
 export function toSgroup(sgroup) {

packages/ketcher-react/src/script/ui/data/schema/sdata-schema.js

@@ -303,6 +303,7 @@ const sData = {
 
 export const sdataCustomSchema = {
   key: 'Custom',
+  title: 'Data',
   type: 'object',
   properties: {
     type: { enum: ['DAT'] },

packages/ketcher-react/src/script/ui/data/schema/struct-schema.js

@@ -16,6 +16,7 @@
 
 import { mapOf } from './schema-helper'
 import { range } from 'lodash/fp'
+import { sdataCustomSchema } from './sdata-schema'
 
 export const atom = {
   title: 'Atom',
@@ -216,12 +217,7 @@ const sgroup = {
   required: ['type'],
   oneOf: [
     {
-      key: 'GEN',
-      title: 'Generic',
-      type: 'object',
-      properties: {
-        type: { enum: ['GEN'] }
-      }
+      ...sdataCustomSchema
     },
     {
       key: 'MUL',

packages/ketcher-react/src/script/ui/dialog/index.ts

@@ -37,8 +37,7 @@ import PeriodTable from '../views/modal/components/PeriodTable'
 import ExtendedTable from '../views/modal/components/ExtendedTable'
 import { RemoveFG } from '../views/modal/components/toolbox/FG/RemoveFG'
 import Rgroup from './toolbox/rgroup/rgroup'
-import Sdata from './toolbox/sdata'
-import Sgroup from './toolbox/sgroup'
+import SGroup from './toolbox/sgroup'
 import TemplateAttach from './template/template-attach'
 import TemplatesDialog from './template/TemplateDialog'
 import Text from '../views/modal/components/Text'
@@ -66,8 +65,7 @@ export default {
   removeFG: RemoveFG,
   save: Save,
   settings: Settings,
-  sgroup: Sgroup,
-  sdata: Sdata,
+  sgroup: SGroup,
   text: Text,
   confirm: Confirm
 } as any

packages/ketcher-react/src/script/ui/dialog/toolbox/SDataFieldset.jsx

@@ -0,0 +1,80 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { Field } from '../../component/form/form/form'
+import { getSelectOptionsFromSchema } from '../../utils'
+import Select from '../../component/form/Select'
+import { sdataCustomSchema } from '../../data/schema/sdata-schema'
+
+function SDataFieldset({ formState }) {
+  const { result } = formState
+  const formSchema = sdataCustomSchema
+
+  return (
+    <fieldset className="sdata">
+      <Field
+        name="context"
+        options={getSelectOptionsFromSchema(formSchema.properties.context)}
+        component={Select}
+      />
+      <Field name="fieldName" placeholder="Enter name" />
+      {content(
+        formSchema,
+        result.context,
+        result.fieldName,
+        result.fieldValue,
+        result.radiobuttons
+      )}
+    </fieldset>
+  )
+}
+
+const content = (schema, context, fieldName, fieldValue, checked) =>
+  Object.keys(schema.properties)
+    .filter(
+      (prop) => prop !== 'type' && prop !== 'context' && prop !== 'fieldName'
+    )
+    .map((prop) => {
+      if (prop === 'radiobuttons') {
+        return (
+          <Field
+            name={prop}
+            checked={checked}
+            type="radio"
+            key={`${context}-${fieldName}-${prop}-radio`}
+            labelPos={false}
+          />
+        )
+      } else if (prop === 'fieldValue') {
+        return (
+          <Field
+            name={prop}
+            key={`${context}-${fieldName}-${prop}-select`}
+            placeholder="Enter value"
+          />
+        )
+      } else {
+        return (
+          <Field
+            name={prop}
+            type="textarea"
+            key={`${context}-${fieldName}-${prop}-select`}
+          />
+        )
+      }
+    })
+
+export default SDataFieldset

packages/ketcher-react/src/script/ui/dialog/toolbox/SGroupFieldset.jsx

@@ -0,0 +1,61 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { Field } from '../../component/form/form/form'
+import Select from '../../component/form/Select'
+import { sgroupMap as schemes } from '../../data/schema/struct-schema'
+import { getSelectOptionsFromSchema } from '../../utils'
+import classes from './sgroup.module.less'
+
+function SGroupFieldset({ formState }) {
+  const { result } = formState
+
+  const type = result.type
+
+  return (
+    <fieldset className={type === 'DAT' ? classes.data : 'base'}>
+      {content(type)}
+    </fieldset>
+  )
+}
+
+const propMapping = {
+  name: { maxLength: 15 },
+  fieldName: { maxLength: 30 },
+  fieldValue: { type: 'textarea' },
+  radiobuttons: { type: 'radio' }
+}
+
+const content = (type) =>
+  Object.keys(schemes[type].properties)
+    .filter((prop) => prop !== 'type')
+    .map((prop) => {
+      if (prop === 'connectivity') {
+        return (
+          <Field
+            name={prop}
+            key={`${type}-${prop}`}
+            component={Select}
+            options={getSelectOptionsFromSchema(schemes[type].properties[prop])}
+          />
+        )
+      }
+
+      const props = propMapping[prop] || {}
+      return <Field name={prop} key={`${type}-${prop}`} {...props} />
+    })
+
+export default SGroupFieldset