From 0de57623b6d3ba5ca1c8d88e352d7d29dbe44718 Mon Sep 17 00:00:00 2001
From: Nikita <Nikita_Vozisov@epam.com>
Date: Tue, 2 May 2023 14:26:41 +0300
Subject: [PATCH] =?UTF-8?q?=20=20#2548=20=E2=80=93=20If=20name=20of=20Supe?=
 =?UTF-8?q?ratom=20matches=20abbreviation=20in=20Custom=20Templates,=20the?=
 =?UTF-8?q?n=20tooltip=20is=20shown=20on=20hover=20(#2563)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/utils/functionalGroupsTooltip.ts   | 27 +++++++++++++++++--
 .../src/script/ui/utils/renderStruct.ts       |  8 +++---
 .../components/StructEditor/InfoPanel.tsx     |  1 +
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/ketcher-react/src/script/editor/utils/functionalGroupsTooltip.ts b/packages/ketcher-react/src/script/editor/utils/functionalGroupsTooltip.ts
index fbd2be0cc8..63cc042ec8 100644
--- a/packages/ketcher-react/src/script/editor/utils/functionalGroupsTooltip.ts
+++ b/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,
diff --git a/packages/ketcher-react/src/script/ui/utils/renderStruct.ts b/packages/ketcher-react/src/script/ui/utils/renderStruct.ts
index b1ca264713..e8d44cd218 100644
--- a/packages/ketcher-react/src/script/ui/utils/renderStruct.ts
+++ b/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)
+      }
     }
   }
 }
diff --git a/packages/ketcher-react/src/script/ui/views/components/StructEditor/InfoPanel.tsx b/packages/ketcher-react/src/script/ui/views/components/StructEditor/InfoPanel.tsx
index 40704eaf20..1dfa9cac52 100644
--- a/packages/ketcher-react/src/script/ui/views/components/StructEditor/InfoPanel.tsx
+++ b/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