Backmerge: #2548 – If name of Superatom matches abbreviation in Custom Templates, then tooltip is shown on hover (#2563)

packages/ketcher-react/src/script/editor/utils/functionalGroupsTooltip.ts

@@ -1,9 +1,31 @@
-import { FunctionalGroup } from 'ketcher-core'
+import { Bond, Struct } from 'ketcher-core'
 
 let showTooltipTimer: ReturnType<typeof setTimeout> | null = null
 
 export const TOOLTIP_DELAY = 300
 
+function makeStruct(editor, sGroup) {
+  const existingStruct = editor.struct()
+  const struct = new Struct()
+  const atomsIdMapping = new Map()
+
+  sGroup.atoms.forEach((atomId) => {
+    const atomIdInTooltip = struct.atoms.add(existingStruct.atoms.get(atomId))
+    atomsIdMapping.set(atomId, atomIdInTooltip)
+  })
+  Array.from(existingStruct.bonds).forEach((value) => {
+    const [_, bond] = value as [number, Bond]
+    const clonedBond = bond.clone(atomsIdMapping)
+    const isInsideSGroup =
+      sGroup.atoms.includes(bond.begin) || sGroup.atoms.includes(bond.end)
+    if (isInsideSGroup) {
+      struct.bonds.add(clonedBond)
+    }
+  })
+
+  return struct
+}
+
 export function showTooltip(editor, infoPanelData) {
   editor.event.showInfo.dispatch(null)
 
@@ -28,7 +50,8 @@ export function showFunctionalGroupsTooltip(editor) {
     const sGroup = editor.struct()?.sgroups.get(closestCollapsibleStructures.id)
     if (sGroup && !sGroup.data.expanded && sGroup.hovering) {
       const groupName = sGroup.data.name
-      const groupStruct = FunctionalGroup.getFunctionalGroupByName(groupName)
+      const groupStruct = makeStruct(editor, sGroup)
+      groupStruct.name = groupName
       infoPanelData = {
         groupStruct,
         event,

packages/ketcher-react/src/script/ui/utils/renderStruct.ts

@@ -26,9 +26,9 @@ export class RenderStruct {
     options: any = {}
   ) {
     if (el && struct) {
-      const { cachePrefix = '' } = options
+      const { cachePrefix = '', needCache = true } = options
       const cacheKey = `${cachePrefix}${struct.name}`
-      if (renderCache.has(cacheKey)) {
+      if (renderCache.has(cacheKey) && needCache) {
         el.innerHTML = renderCache.get(cacheKey)
         return
       }
@@ -43,7 +43,9 @@ export class RenderStruct {
       })
       rnd.setMolecule(preparedStruct)
       rnd.update(true, options.viewSz)
-      renderCache.set(cacheKey, rnd.clientArea.innerHTML)
+      if (needCache) {
+        renderCache.set(cacheKey, rnd.clientArea.innerHTML)
+      }
     }
   }
 }

packages/ketcher-react/src/script/ui/views/components/StructEditor/InfoPanel.tsx

@@ -138,6 +138,7 @@ const InfoPanel: FC<InfoPanelProps> = (props) => {
           autoScaleMargin: 0,
           rescaleAmount: 1,
           cachePrefix: 'infoPanel',
+          needCache: false,
           viewSz: new Vec2(width, height),
           width: width,
           height: height