527 Implement "Enhanced Stereochemistry" window

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

@@ -14,15 +14,13 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { capitalize } from 'lodash/fp'
+import { AtomList, Bond, Elements, StereoLabel } from 'ketcher-core'
 
-import { Bond, AtomList, StereoLabel, Elements } from 'ketcher-core'
-import { sdataSchema } from '../schema/sdata-schema'
 import { atom as atomSchema } from '../schema/struct-schema'
-import {
-  getPredefinedStereoLabels,
-  predefinedStereoGroups
-} from '../../dialog/toolbox/enhancedStereo'
+import { capitalize } from 'lodash/fp'
+import { sdataSchema } from '../schema/sdata-schema'
+
+const DefaultStereoGroupNumber = 1
 
 export function fromElement(selem) {
   if (selem.label === 'R#') {
@@ -126,24 +124,19 @@ export function fromStereoLabel(stereoLabel) {
   if (stereoLabel === null) return { type: null }
   const type = stereoLabel.match(/\D+/g)[0]
   const number = +stereoLabel.replace(type, '')
-  const defaultOrNumber = predefinedStereoGroups[StereoLabel.Or].max + 1
-  const defaultAndNumber = predefinedStereoGroups[StereoLabel.And].max + 1
 
-  if (
-    type === StereoLabel.Abs ||
-    getPredefinedStereoLabels(type).includes(stereoLabel)
-  ) {
+  if (type === StereoLabel.Abs) {
     return {
       type: stereoLabel,
-      orNumber: defaultOrNumber,
-      andNumber: defaultAndNumber
+      orNumber: DefaultStereoGroupNumber,
+      andNumber: DefaultStereoGroupNumber
     }
   }
 
   if (type === StereoLabel.And) {
     return {
       type: type,
-      orNumber: defaultOrNumber,
+      orNumber: DefaultStereoGroupNumber,
       andNumber: number
     }
   }
@@ -152,7 +145,7 @@ export function fromStereoLabel(stereoLabel) {
     return {
       type: type,
       orNumber: number,
-      andNumber: defaultOrNumber
+      andNumber: DefaultStereoGroupNumber
     }
   }
 }

packages/ketcher-react/src/script/ui/dialog/toolbox/enhancedStereo.tsx

@@ -1,67 +1,10 @@
-import React from 'react'
-import { connect } from 'react-redux'
-
-import { Dialog } from '../../views/components'
 import Form, { Field } from '../../component/form/form'
-import { StereoLabel } from 'ketcher-core'
-
-export const predefinedStereoGroups = {
-  [StereoLabel.And]: {
-    min: 1,
-    max: 2
-  },
-  [StereoLabel.Or]: {
-    min: 1,
-    max: 2
-  }
-} as const
-
-export function getPredefinedStereoLabels(stereoLabel: StereoLabel): string[] {
-  const min = predefinedStereoGroups[stereoLabel].min
-  const max = predefinedStereoGroups[stereoLabel].max
+import { StereoLabel, Struct } from 'ketcher-core'
 
-  return new Array(max - min + 1)
-    .fill(null)
-    .map((_, index) => stereoLabel + (min + index))
-}
-
-const enhancedStereoSchema = {
-  title: 'Enhanced Stereo',
-  type: 'object',
-  properties: {
-    type: {
-      title: 'Stereo Label',
-      enum: [
-        StereoLabel.Abs,
-        ...getPredefinedStereoLabels(StereoLabel.And),
-        StereoLabel.And,
-        ...getPredefinedStereoLabels(StereoLabel.Or),
-        StereoLabel.Or
-      ],
-      enumNames: [
-        'ABS',
-        ...getPredefinedStereoLabels(StereoLabel.And).map(stereoLabel =>
-          stereoLabel.replace(StereoLabel.And, 'AND')
-        ),
-        'AND...',
-        ...getPredefinedStereoLabels(StereoLabel.Or).map(stereoLabel =>
-          stereoLabel.toUpperCase()
-        ),
-        'OR...'
-      ]
-    },
-    andNumber: {
-      type: 'integer',
-      minimum: 1,
-      invalidMessage: 'Only positive integer'
-    },
-    orNumber: {
-      type: 'integer',
-      minimum: 1,
-      invalidMessage: 'Only positive integer'
-    }
-  }
-}
+import { Dialog } from '../../views/components'
+import React from 'react'
+import { connect } from 'react-redux'
+import { range } from 'lodash'
 
 interface EnhancedStereoResult {
   andNumber: number
@@ -79,6 +22,7 @@ interface EnhancedStereoProps {
   className: string
   init: EnhancedStereoResult & { init?: true }
   formState: EnhancedStereoFormState
+  struct: Struct
 }
 
 interface EnhancedStereoCallProps {
@@ -89,24 +33,31 @@ interface EnhancedStereoCallProps {
 type Props = EnhancedStereoProps & EnhancedStereoCallProps
 
 const EnhancedStereo: React.FC<Props> = props => {
-  const { formState, init, ...rest } = props
+  const { struct, formState, init, ...rest } = props
   const { result, valid } = formState
 
-  const handleChange = (
-    stereoLabel: StereoLabel,
-    newState: EnhancedStereoResult
-  ): EnhancedStereoResult => {
-    const defaultOrNumber = predefinedStereoGroups[StereoLabel.Or].max + 1
-    const defaultAndNumber = predefinedStereoGroups[StereoLabel.And].max + 1
+  const stereoLabels: Array<string> = findStereLabels(
+    struct,
+    Array.from(struct.atoms.keys())
+  )
 
-    if (andNumberDisabled(stereoLabel)) {
-      newState.andNumber = defaultAndNumber
-    }
-    if (orNumberDisabled(stereoLabel)) {
-      newState.orNumber = defaultOrNumber
+  const maxAnd: number = maxOfAnds(stereoLabels)
+  const maxOr: number = maxOfOrs(stereoLabels)
+
+  const enhancedStereoSchema = {
+    title: 'Enhanced Stereo',
+    type: 'object',
+    properties: {
+      type: {
+        type: 'string'
+      },
+      andNumber: {
+        type: 'integer'
+      },
+      orNumber: {
+        type: 'integer'
+      }
     }
-
-    return newState
   }
 
   return (
@@ -116,74 +67,104 @@ const EnhancedStereo: React.FC<Props> = props => {
       params={rest}
       result={() => result}
       valid={() => valid}
-      buttons={['OK', 'Close']}>
+      buttons={['Cancel', 'OK']}>
       <Form schema={enhancedStereoSchema} init={init} {...formState}>
-        <Field
-          name="type"
-          component={FieldSet}
-          labelPos={false}
-          onChange={handleChange}
-        />
-      </Form>
-    </Dialog>
-  )
-}
-
-interface FieldSetProps {
-  name: string
-  schema: any
-  value: StereoLabel
-  onChange: (value: string) => void
-  type?: string
-}
-
-const FieldSet: React.FC<FieldSetProps> = props => {
-  const { schema, value, onChange, type = 'radio', ...rest } = props
-
-  return (
-    <fieldset>
-      {schema.enum.map((val, index) => (
-        <li key={schema.enumNames[index]} className="stereo-label-item">
-          <label className="stereo-label-name">
-            <input
-              type={type}
-              checked={val === value}
-              value={val}
-              onChange={() => onChange(val)}
-              {...rest}
+        <fieldset>
+          <label className="stereo-label-item">
+            <Field
+              name="type"
+              labelPos={false}
+              type="radio"
+              value={StereoLabel.Abs}
+              checked={result.type === StereoLabel.Abs}
             />
-            {schema.enumNames[index]}
+            ABS
           </label>
-          {val === StereoLabel.And && (
+          {maxAnd !== 0 && (
+            <label className="stereo-label-item">
+              <Field
+                name="type"
+                labelPos={false}
+                type="radio"
+                value={StereoLabel.And}
+                checked={result.type === StereoLabel.And}
+              />
+              Add to AND
+              <Field
+                name="andNumber"
+                schema={range(1, maxAnd + 1)}
+                type="text"
+                className="label-group-select"
+              />
+              Group
+            </label>
+          )}
+          {maxOr !== 0 && (
+            <label className="stereo-label-item">
+              <Field
+                name="type"
+                labelPos={false}
+                type="radio"
+                value={StereoLabel.Or}
+                checked={result.type === StereoLabel.Or}
+              />
+              Add to OR
+              <Field
+                name="orNumber"
+                schema={range(1, maxOr + 1)}
+                type="text"
+                className="label-group-select"
+              />
+              Group
+            </label>
+          )}
+          <label className="stereo-label-item">
             <Field
-              name="andNumber"
-              type="text"
-              className="label-group-value"
-              disabled={andNumberDisabled(value)}
+              name="type"
+              labelPos={false}
+              type="radio"
+              value={`&${maxOr + 1}`}
             />
-          )}
-          {val === StereoLabel.Or && (
+            Create new AND Group
+          </label>
+          <label className="stereo-label-item">
             <Field
-              name="orNumber"
-              type="text"
-              className="label-group-value"
-              disabled={orNumberDisabled(value)}
+              name="type"
+              labelPos={false}
+              type="radio"
+              value={`or${maxOr + 1}`}
             />
-          )}
-        </li>
-      ))}
-    </fieldset>
+            Create new OR Group
+          </label>
+        </fieldset>
+      </Form>
+    </Dialog>
+  )
+}
+
+// TODO: Move the function below to Struct class
+function findStereLabels(struct, aids): Array<string> {
+  const stereoIds = aids.filter(
+    aid => struct.atoms.get(aid).stereoLabel !== null
   )
+  return stereoIds.map(aid => struct.atoms.get(aid).stereoLabel)
 }
 
-function andNumberDisabled(stereoLabel: StereoLabel): boolean {
-  return !stereoLabel || stereoLabel !== StereoLabel.And || stereoLabel === null
+function maxOfAnds(stereLabels): number {
+  const numbers = stereLabels.map(label => {
+    return label.match(/&/) ? +label.match(/\d+/)?.join() : 0
+  })
+  return Math.max(...numbers)
 }
 
-function orNumberDisabled(stereoLabel: StereoLabel): boolean {
-  return !stereoLabel || stereoLabel !== StereoLabel.Or || stereoLabel === null
+function maxOfOrs(stereLabels): number {
+  const numbers = stereLabels.map(label => {
+    return label.match(/or/) ? +label.match(/\d+/)?.join() : 0
+  })
+  return Math.max(...numbers)
 }
 
-export default connect(store => ({
-  formState: store.modal.form || { result: {}, valid: false }
+export default connect(state => ({
+  formState: state.modal.form || { result: {}, valid: false },
+  struct: state.editor.struct()
 }))(EnhancedStereo)

packages/ketcher-react/src/style/dialogs.less

@@ -175,21 +175,31 @@
 }
 
 .enhanced-stereo {
+  width: 330px;
+
   .stereo-label-item {
     display: flex;
     align-items: center;
     min-height: 2.4em;
     margin: 2px;
   }
+
   .stereo-label-name {
     display: flex;
     align-items: center;
     min-width: 60px;
-    margin-right: 15px;
+    margin-right: 5px;
   }
+
   .label-group-value {
-    width: 48px;
+    width: 22px;
     margin: 0;
+    margin-right: 5px;
+  }
+
+  .label-group-select {
+    margin-right: 5px;
+    margin-left: 5px;
   }
 }