#1820 – UI improvements

epam · Dec 6, 2022 · 448a616 · 448a616
1 parent 2e6207e
commit 448a616
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 39 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,10 @@ 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()) {
@@ -616,10 +619,6 @@ function uniqArray(dest, add, reversible: boolean) {
   }, [])
 }
 
-/**
- * Salts and Solvents are kind of special structures:
- * they can not be merged with other structures and are always standalone
- */
 function preventSaltAndSolventsMerge(
   struct: ReStruct,
   dragCtx,
@@ -629,7 +628,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/editor/tool/template.ts b/packages/ketcher-react/src/script/editor/tool/template.ts
@@ -397,7 +397,12 @@ class TemplateTool {
     let pasteItems = null
 
     if (SGroup.isSaltOrSolvent(this.template.molecule.name)) {
-      addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor)
+      addSaltsAndSolventsOnCanvasWithoutMerge(
+        restruct,
+        this.template,
+        dragCtx,
+        this.editor
+      )
       return true
     }
 
@@ -496,10 +501,6 @@ class TemplateTool {
   }
 }
 
-/**
- * Salts and Solvents are kind of special structures:
- * they can not be merged with other structures and are always standalone
- */
 function addSaltsAndSolventsOnCanvasWithoutMerge(
   restruct: ReStruct,
   template: Struct,

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,32 @@ 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 +228,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/dialog/template/TemplateTable.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx
@@ -29,7 +29,7 @@ export interface Template {
     bondid: number
     group: string
     prerender?: string
-    abbreviation: string 
+    abbreviation: string
     name: string
   }
 }
@@ -45,8 +45,10 @@ 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'
+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)) {
@@ -131,7 +133,8 @@ const TemplateTable: FC<TemplateTableProps> = (props) => {
                 <Icon name="delete" />
               </button>
             )}
-            {!isFunctionalGroupTemplate(tmpl) && !isSaltOrSolventTemplate(tmpl) && (
+            {!isFunctionalGroupTemplate(tmpl) &&
+              !isSaltOrSolventTemplate(tmpl) && (
                 <button
                   className={`${classes.button} ${classes.editButton}`}
                   onClick={() => onAttach!(tmpl)}

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,16 @@ 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)

diff --git a/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx b/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx
@@ -39,7 +39,7 @@ interface DialogProps {
   needMargin?: boolean
   withDivider?: boolean
   headerContent?: ReactElement
-  footerContent?: ReactElement | null
+  footerContent?: ReactElement
   buttonsNameMap?: {
     [key in string]: string
   }