#1921: Hovering over some functional groups crops the expanded view o…

…f it (#1923) * #1921: refactor info panel and fix bug with cropped expanded molecules * #1921: small tweak * #1921: add more tools * #1921: fix zoom * #1921: review comments * #1920 – added abbreviation to Struct, fixed isSaltOrSolvent check * #1912: fix missing first atom in sGroup * #1912: fix showing popup for salts and solvents * #1912: small tweak * #1912: fix bug with determining salts * #1912: fix merge Co-authored-by: Nikita_Vozisov <Nikita_Vozisov@epam.com>
epam · Dec 15, 2022 · c5d9ba0 · c5d9ba0
1 parent 9c82981
commit c5d9ba0
Show file tree

Hide file tree

Showing 17 changed files with 239 additions and 223 deletions.
diff --git a/packages/ketcher-core/src/application/render/raphaelRender.ts b/packages/ketcher-core/src/application/render/raphaelRender.ts
@@ -262,22 +262,31 @@ class Render {
           return
         }
         const sz1 = boundingBox.sz()
-        const marg = this.options.autoScaleMargin
-        const mv = new Vec2(marg, marg)
+        const { autoScaleMargin, rescaleAmount, maxBondLength } = this.options
+        const mv = new Vec2(autoScaleMargin, autoScaleMargin)
         const csz = viewSz
-        if (csz.x < 2 * marg + 1 || csz.y < 2 * marg + 1) {
+        if (
+          autoScaleMargin &&
+          (csz.x < 2 * autoScaleMargin + 1 || csz.y < 2 * autoScaleMargin + 1)
+        ) {
           throw new Error('View box too small for the given margin')
         }
-        let rescale = Math.max(
-          sz1.x / (csz.x - 2 * marg),
-          sz1.y / (csz.y - 2 * marg)
-        )
-        if (this.options.maxBondLength / rescale > 1.0) rescale = 1.0
+        let rescale =
+          rescaleAmount ||
+          Math.max(
+            sz1.x / (csz.x - 2 * autoScaleMargin),
+            sz1.y / (csz.y - 2 * autoScaleMargin)
+          )
+        if (maxBondLength / rescale > 1.0) rescale = 1.0
         const sz2 = sz1.add(mv.scaled(2 * rescale))
         /* eslint-disable no-mixed-operators */
         this.paper.setViewBox(
-          boundingBox.pos().x - marg * rescale - (csz.x * rescale - sz2.x) / 2,
-          boundingBox.pos().y - marg * rescale - (csz.y * rescale - sz2.y) / 2,
+          boundingBox.pos().x -
+            autoScaleMargin * rescale -
+            (csz.x * rescale - sz2.x) / 2,
+          boundingBox.pos().y -
+            autoScaleMargin * rescale -
+            (csz.y * rescale - sz2.y) / 2,
           csz.x * rescale,
           csz.y * rescale
         )

diff --git a/packages/ketcher-core/src/domain/entities/functionalGroup.ts b/packages/ketcher-core/src/domain/entities/functionalGroup.ts
@@ -45,21 +45,25 @@ export class FunctionalGroup {
 
   static isFunctionalGroup(sgroup): boolean {
     const provider = FunctionalGroupsProvider.getInstance()
-    const types = provider.getFunctionalGroupsList()
+    const functionalGroups = provider.getFunctionalGroupsList()
     const {
       data: { name },
       type
     } = sgroup
     return (
       type === 'SUP' &&
-      (types.some((type) => type.name === name) || SGroup.isSaltOrSolvent(name))
+      (functionalGroups.some((type) => type.name === name) ||
+        SGroup.isSaltOrSolvent(name))
     )
   }
 
   static getFunctionalGroupByName(searchName: string): Struct | null {
     const provider = FunctionalGroupsProvider.getInstance()
-    const types = provider.getFunctionalGroupsList()
-    return types.find((fnGroup) => fnGroup.name === searchName) || null
+    const functionalGroups = provider.getFunctionalGroupsList()
+    const foundGroup = functionalGroups.find(({ name, abbreviation }) => {
+      return name === searchName || abbreviation === searchName
+    })
+    return foundGroup || null
   }
 
   static atomsInFunctionalGroup(functionalGroups, atom): number | null {

diff --git a/packages/ketcher-core/src/domain/entities/sgroup.ts b/packages/ketcher-core/src/domain/entities/sgroup.ts
@@ -77,6 +77,7 @@ export class SGroup {
   neiAtoms: any
   pp: Vec2 | null
   data: any
+  firstSgroupAtom: any
 
   constructor(type: string) {
     this.type = type

diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
@@ -210,9 +210,9 @@ class Editor implements KetcherEditor {
 
     const tool = new toolMap[name](this, opts)
 
-    // hide icon if not AtomToll chosen
-    if (name !== 'atom') {
-      this.render.paper.getById('atomHoverIcon')?.hide()
+    const isAtomToolChosen = name === 'atom'
+    if (!isAtomToolChosen) {
+      this.hoverIcon.hide()
     }
 
     if (!tool || tool.isNotActiveTool) {
@@ -349,7 +349,7 @@ class Editor implements KetcherEditor {
   hover(ci: any, newTool?: any, event?: PointerEvent) {
     const tool = newTool || this._tool // eslint-disable-line
 
-    let highlight: any = false
+    let infoPanelData: any = null
 
     if (
       'ci' in tool &&
@@ -363,25 +363,25 @@ class Editor implements KetcherEditor {
 
     if (!event) return
 
-    const myCi = this.findItem(event, ['sgroups', 'functionalGroups'])
-    if (myCi) {
-      if (myCi.map === 'sgroups' || myCi.map === 'functionalGroups') {
-        const sGroup = this.struct()?.sgroups.get(myCi.id)
-        if (sGroup && !sGroup.data.expanded) {
-          const groupName = sGroup.data.name
-          const groupStruct =
-            FunctionalGroup.getFunctionalGroupByName(groupName)
-          highlight = {
-            group: groupStruct,
-            x: event.clientX,
-            y: event.clientY,
-            groupId: myCi.id
-          }
+    const checkFunctionGroupTypes = ['sgroups', 'functionalGroups']
+    const closestCollapsibleStructures = this.findItem(
+      event,
+      checkFunctionGroupTypes
+    )
+    if (closestCollapsibleStructures) {
+      const sGroup = this.struct()?.sgroups.get(closestCollapsibleStructures.id)
+      if (sGroup && !sGroup.data.expanded) {
+        const groupName = sGroup.data.name
+        const groupStruct = FunctionalGroup.getFunctionalGroupByName(groupName)
+        infoPanelData = {
+          groupStruct,
+          event,
+          sGroup
         }
       }
     }
-    if (highlight) {
-      this.event.showInfo.dispatch(highlight)
+    if (infoPanelData) {
+      this.event.showInfo.dispatch(infoPanelData)
     } else {
       this.event.showInfo.dispatch(null)
     }

diff --git a/packages/ketcher-react/src/script/editor/tool/atom.ts b/packages/ketcher-react/src/script/editor/tool/atom.ts
@@ -154,7 +154,9 @@ class AtomTool {
         y: layerY - height / 2
       })
       this.editor.hover(
-        this.editor.findItem(event, ['atoms', 'functionalGroups'])
+        this.editor.findItem(event, ['atoms', 'functionalGroups']),
+        null,
+        event
       )
       return
     }

diff --git a/packages/ketcher-react/src/script/editor/tool/bond.ts b/packages/ketcher-react/src/script/editor/tool/bond.ts
@@ -253,7 +253,11 @@ class BondTool {
         return true
       }
     }
-    this.editor.hover(this.editor.findItem(event, ['atoms', 'bonds']))
+    this.editor.hover(
+      this.editor.findItem(event, ['atoms', 'bonds']),
+      null,
+      event
+    )
     return true
   }
 

diff --git a/packages/ketcher-react/src/script/editor/tool/chain.ts b/packages/ketcher-react/src/script/editor/tool/chain.ts
@@ -124,7 +124,7 @@ class ChainTool {
     const restruct = editor.render.ctab
     const dragCtx = this.dragCtx
 
-    editor.hover(this.editor.findItem(event, ['atoms', 'bonds']))
+    editor.hover(this.editor.findItem(event, ['atoms', 'bonds']), null, event)
     if (!dragCtx) {
       return true
     }

diff --git a/packages/ketcher-react/src/script/editor/tool/charge.ts b/packages/ketcher-react/src/script/editor/tool/charge.ts
@@ -38,7 +38,7 @@ class ChargeTool {
     ) {
       this.editor.hover(ci)
     } else {
-      this.editor.hover(null)
+      this.editor.hover(null, null, event)
     }
     return true
   }

diff --git a/packages/ketcher-react/src/script/editor/tool/reactionarrow.ts b/packages/ketcher-react/src/script/editor/tool/reactionarrow.ts
@@ -107,7 +107,7 @@ class ReactionArrowTool {
       }
     } else {
       const items = this.editor.findItem(event, ['rxnArrows'])
-      this.editor.hover(items)
+      this.editor.hover(items, null, event)
     }
   }
 

diff --git a/packages/ketcher-react/src/script/editor/tool/text.ts b/packages/ketcher-react/src/script/editor/tool/text.ts
@@ -68,7 +68,7 @@ class TextTool {
       )
       this.editor.update(this.dragCtx.action, true)
     } else {
-      this.editor.hover(this.editor.findItem(event, ['texts']))
+      this.editor.hover(this.editor.findItem(event, ['texts']), null, event)
     }
   }
 

diff --git a/packages/ketcher-react/src/script/ui/component/structrender.tsx b/packages/ketcher-react/src/script/ui/component/structrender.tsx
@@ -42,8 +42,10 @@ function renderStruct(
   options: any = {}
 ) {
   if (el && struct) {
-    if (renderCache.has(struct.name)) {
-      el.innerHTML = renderCache.get(struct.name)
+    const { cachePrefix = '' } = options
+    const cacheKey = `${cachePrefix}${struct.name}`
+    if (renderCache.has(cacheKey)) {
+      el.innerHTML = renderCache.get(cacheKey)
       return
     }
     const preparedStruct = prepareStruct(struct)
@@ -57,7 +59,7 @@ function renderStruct(
     })
     rnd.setMolecule(preparedStruct)
     rnd.update(true, options.viewSz)
-    renderCache.set(struct.name, rnd.clientArea.innerHTML)
+    renderCache.set(cacheKey, rnd.clientArea.innerHTML)
   }
 }
 

diff --git a/packages/ketcher-react/src/script/ui/state/editor/index.js b/packages/ketcher-react/src/script/ui/state/editor/index.js
@@ -156,10 +156,7 @@ export default function initEditor(dispatch, getState) {
     },
     onSgroupEdit: (sgroup) =>
       sleep(0) // huck to open dialog after dispatch sgroup tool action
-        .then(() => {
-          console.log('onSgroupEdit')
-          openDialog(dispatch, 'sgroup', fromSgroup(sgroup))
-        })
+        .then(() => openDialog(dispatch, 'sgroup', fromSgroup(sgroup)))
         .then(toSgroup),
     onRemoveFG: (result) =>
       sleep(0).then(() => openDialog(dispatch, 'removeFG', result)),
@@ -204,12 +201,12 @@ export default function initEditor(dispatch, getState) {
       updateAction()
     },
     onConfirm: () => openDialog(dispatch, 'confirm'),
-    onShowInfo: (pl) => {
-      if (pl) {
-        const { group, groupId, x, y } = pl
-        highlightFG(dispatch, { group, id: group?.name, x, y, groupId })
+    onShowInfo: (payload) => {
+      if (payload) {
+        const { groupStruct, event, sGroup } = payload
+        highlightFG(dispatch, { groupStruct, event, sGroup })
       } else {
-        highlightFG(dispatch, { group: null, id: null })
+        highlightFG(dispatch, { groupStruct: null, event: null, sGroup: null })
       }
     }
   }

diff --git a/packages/ketcher-react/src/script/ui/state/saltsAndSolvents/index.ts b/packages/ketcher-react/src/script/ui/state/saltsAndSolvents/index.ts
@@ -64,7 +64,8 @@ export function initSaltsAndSolventsTemplates(baseUrl: string) {
     const templates = sdfSerializer.deserialize(text)
     const saltsAndSolvents = templates.reduce(
       (acc: Struct[], { struct, props }) => {
-        acc.push({ ...struct, abbreviation: props.abbreviation } as Struct)
+        struct.abbreviation = String(props.abbreviation)
+        acc.push(struct)
         return acc
       },
       []