#1820 – changed display of title and name for salts and solvents

epam · Dec 5, 2022 · e168b62 · e168b62
1 parent 14b056e
commit e168b62
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 8 deletions.
diff --git a/example/package.json b/example/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start:standalone": "cross-env MODE=standalone ENABLE_POLYMER_EDITOR=false KETCHER_ENABLE_REDUX_LOGGER=true react-app-rewired start",
+    "start:standalone": "cross-env MODE=standalone ENABLE_POLYMER_EDITOR=false react-app-rewired start",
     "start:remote": "cross-env MODE=remote ENABLE_POLYMER_EDITOR=false react-app-rewired start",
     "clean:build": "shx rm -rf build",
     "delete:dist": "shx rm -rf dist/$MODE",

diff --git a/packages/ketcher-react/src/script/editor/tool/template.ts b/packages/ketcher-react/src/script/editor/tool/template.ts
@@ -397,7 +397,7 @@ class TemplateTool {
     let pasteItems = null
 
     if (SGroup.isSaltOrSolvent(this.template.molecule.name)) {
-      preventSaltAndSolventsMerge(restruct, this.template, dragCtx, this.editor)
+      addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor)
       return true
     }
 
@@ -500,7 +500,7 @@ class TemplateTool {
  * Salts and Solvents are kind of special structures:
  * they can not be merged with other structures and are always standalone
  */
-function preventSaltAndSolventsMerge(
+function addSaltsAndSolventsOnCanvasWithoutMerge(
   restruct: ReStruct,
   template: Struct,
   dragCtx,

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
@@ -357,7 +357,11 @@ const TemplateDialog: FC<Props> = (props) => {
   )
 }
 
-// For now, totally have no idea, what it does
+/*
+  Think, this is a kind of workaround for some logic.
+  Without it only names of structures are rendered in dialog
+  instead of chemical structure.
+*/
 const removeSgroup = (template) => {
   const struct = template.struct.clone()
   struct.sgroups.delete(0)

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx
@@ -30,6 +30,8 @@ export interface Template {
     bondid: number
     group: string
     prerender?: string
+    abbreviation: string 
+    name: string
   }
 }
 
@@ -44,8 +46,20 @@ interface TemplateTableProps {
 }
 
 const getSettingsSelector = (state) => state.options.settings
+const isSaltOrSolventTemplate = (template) => template.props.group === 'Salts and Solvents'
+const isFunctionalGroupTemplate = (template) => template.props.group === 'Functional Groups'
+
+function getTemplateTitle(template: Template, index: number): string {
+  if (isSaltOrSolventTemplate(template)) {
+    return template.props.name
+  }
+  return template.struct.name || `${template.props.group} template ${index + 1}`
+}
 
 function tmplName(tmpl: Template, i: number): string {
+  if (isSaltOrSolventTemplate(tmpl)) {
+    return tmpl.props.abbreviation
+  }
   return tmpl.struct.name || `${tmpl.props.group} template ${i + 1}`
 }
 
@@ -89,7 +103,7 @@ const TemplateTable: FC<TemplateTableProps> = (props) => {
                 ? classes.td
                 : `${classes.td} ${classes.selected}`
             }
-            title={greekify(tmplName(tmpl, i))}
+            title={greekify(getTemplateTitle(tmpl, i))}
             key={
               tmpl.struct.name !== selected?.struct.name
                 ? `${tmpl.struct.name}_${i}`
@@ -118,8 +132,7 @@ const TemplateTable: FC<TemplateTableProps> = (props) => {
                 <Icon name="delete" />
               </button>
             )}
-            {tmpl.props.group !== 'Functional Groups' &&
-              tmpl.props.group !== 'Salts and Solvents' && (
+            {!isFunctionalGroupTemplate(tmpl) && !isSaltOrSolventTemplate(tmpl) && (
                 <button
                   className={`${classes.button} ${classes.editButton}`}
                   onClick={() => onAttach!(tmpl)}

diff --git a/packages/ketcher-react/src/script/ui/state/saltsAndSolvents/selectors/index.ts b/packages/ketcher-react/src/script/ui/state/saltsAndSolvents/selectors/index.ts
@@ -15,6 +15,5 @@
  ***************************************************************************/
 
 export const saltsAndSolventsSelector = (state) => {
-  console.log('selector called ', state)
   return state.saltsAndSolvents.lib
 }