#1820 – UI improvements

epam · Dec 6, 2022 · 1965b5e · 1965b5e
1 parent 2e6207e
commit 1965b5e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 25 deletions.
diff --git a/packages/ketcher-react/src/script/editor/tool/select.ts b/packages/ketcher-react/src/script/editor/tool/select.ts
@@ -375,7 +375,7 @@ class SelectTool {
     if (dragCtx && dragCtx.stopTapping) dragCtx.stopTapping()
 
     const possibleSaltOrSolvent = struct.sgroups.get(actualSgroupId)
-    if (SGroup.isSaltOrSolvent(possibleSaltOrSolvent?.item.data.name)) {
+    if (SGroup.isSaltOrSolvent(possibleSaltOrSolvent?.item.data.name) && dragCtx) {
       preventSaltAndSolventsMerge(struct, dragCtx, editor)
       delete this.dragCtx
       if (this.#lassoHelper.running()) {
@@ -629,7 +629,9 @@ function preventSaltAndSolventsMerge(
     ? fromItemsFuse(struct, null).mergeWith(dragCtx.action)
     : fromItemsFuse(struct, null)
   editor.hover(null)
-  editor.selection(null)
+  if (dragCtx.mergeItems) {
+    editor.selection(null)
+  }
   editor.update(action)
   editor.event.message.dispatch({
     info: false

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
@@ -121,30 +121,21 @@ const HeaderContent = () => (
 )
 
 const FooterContent = ({ data, tab }) => {
-  const tabMapping = {
-    [TemplateTabs.TemplateLibrary]: {
-      fileName: 'ketcher-tmpls.sdf',
-      buttonCaption: 'Save template library to SDF'
-    },
-    [TemplateTabs.FunctionalGroupLibrary]: {
-      fileName: 'ketcher-fg-tmpls.sdf',
-      buttonCaption: 'Save functional groups to SDF'
-    },
-    [TemplateTabs.SaltsAndSolvents]: null
-  }
-  if (!tabMapping[tab]) {
-    return null
+  const clickToAddToCanvas = <span>Click to add to canvas</span>
+  if (tab === TemplateTabs.SaltsAndSolvents) {
+    return clickToAddToCanvas
   }
   return (
-    <div style={{ flexGrow: 1 }}>
+    <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
       <SaveButton
         key="save-to-SDF"
         data={data}
         className={classes.saveButton}
-        filename={tabMapping[tab].fileName}
+        filename={tab === TemplateTabs.TemplateLibrary ? 'ketcher-tmpls.sdf' : 'ketcher-fg-tmpls.sdf'}
       >
-        {tabMapping[tab].buttonCaption}
+        Save to SDF
       </SaveButton>
+      {clickToAddToCanvas}
     </div>
   )
 }
@@ -226,15 +217,10 @@ const TemplateDialog: FC<Props> = (props) => {
     else props.onSelect(tmpl)
   }
 
-  const footerContent =
-    tab === TemplateTabs.SaltsAndSolvents ? null : (
-      <FooterContent tab={tab} data={data} />
-    )
-
   return (
     <Dialog
       headerContent={<HeaderContent />}
-      footerContent={footerContent}
+      footerContent={<FooterContent tab={tab} data={data} />}
       className={`${classes.dialog_body}`}
       params={omit(['group'], rest)}
       result={() => result()}

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.module.less b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.module.less
@@ -30,6 +30,8 @@
   border: 1px solid transparent;
   border-radius: 6px;
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   max-width: 100px;
   max-height: 30px;
 }

diff --git a/packages/ketcher-react/src/script/ui/utils/index.ts b/packages/ketcher-react/src/script/ui/utils/index.ts
@@ -55,8 +55,12 @@ export function filterLib(lib, filter) {
 export function filterFGLib(lib, filter) {
   console.warn('Filter', filter)
   const re = new RegExp(escapeRegExp(greekify(filter)), 'i')
+  const searchFunction = (item) => {
+    const fields = [item.struct.name, item.props.abbreviation, item.props.name].filter(Boolean)
+    return fields.some(field => re.test(greekify(field)))
+  }
   return flow(
-    _filter((item: any) => !filter || re.test(greekify(item.struct.name))),
+    _filter((item: any) => !filter || searchFunction(item)),
     reduce((res, item) => {
       if (!res[item.props.group]) res[item.props.group] = [item]
       else res[item.props.group].push(item)