From e168b620837aea888846933195316015760127a6 Mon Sep 17 00:00:00 2001
From: Nikita_Vozisov <Nikita_Vozisov@epam.com>
Date: Mon, 5 Dec 2022 15:25:59 +0300
Subject: [PATCH] =?UTF-8?q?#1820=20=E2=80=93=20changed=20display=20of=20ti?=
 =?UTF-8?q?tle=20and=20name=20for=20salts=20and=20solvents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/package.json                          |  2 +-
 .../src/script/editor/tool/template.ts        |  4 ++--
 .../ui/dialog/template/TemplateDialog.tsx     |  6 +++++-
 .../ui/dialog/template/TemplateTable.tsx      | 19 ++++++++++++++++---
 .../state/saltsAndSolvents/selectors/index.ts |  1 -
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/example/package.json b/example/package.json
index 79aafb2404..e1ac41196b 100644
--- 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
index 288b931d29..281de61314 100644
--- 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
index 353d1c4ecd..fdd437993e 100644
--- 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
index f68c623f2f..1d6ab715cc 100644
--- 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
index eff119f5d8..8b1fd1ef53 100644
--- 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
 }