Add preview for hovering over a bond

[ljubica-milovic]

Background

• Currently the user doesn't see any preview when hovering over a bond in macromolecules mode.
• There should be a preview of both monomers that participate in a bond when hovering over a bond. That preview should contain the name, the structure, and the atoms contained within the attachment points for both monomers. If some attachment points that do not participate in that bond are occupied, they should be marked in gray. The attachment points that participate in that bond should be marked in teal.

Requirements

1. Preview for hovering over a bond should appear with a delay of 0,5 seconds.
   .....1.1. The preview should contain information about both monomers:
   the name of the monomer,
   the structure of the monomer,
   the atoms contained within the attachment points,
   the attachment point that participates in the bond (that the user is hovering over) should be marked in teal,
   and if the monomer has any other attachment points that participate in other bonds (not the bond that the user is hovering over), that attachment point should be marked in gray.

. . 2. Preview placement is described bellow.

.....2.1. The preview should appear in relation to the center of the bond (consider that the bond starts in the centers of monomers).

.....2.2. If the bond is vertical, the preview should appear on the left or on the right, depending on availability of space.
.....2.3. If the bond is horizontal, the preview should appear above or bellow, depending on availability of space.

.....2.4. The preview should appear at the appropriate distance from the bond so it doesn't overlap with the monomers who participate in the bond.

..........For example: if the preview shows up on the left side of the bond, the right edge of the preview should be a certain distance from the left edge of the monomer who is further left.

(Image for better understanding)
.
.
4. Hovering over the bond with the select tool should highlight the monomers and the bond the same way it currently is highlighted for hovering over with the bond tool.

Currently, hovering over a bond with the tool bond:

Currently, hovering over a bond with the select tool:

[AlexeyGirin]

Verified.

Versions

• Ketcher Version 2.25.0-rc.1 Build at 2024-09-03; 15:31:03
• Indigo Toolkit Version 1.24.0-rc.1.0-gb8f099851-wasm32-wasm-clang-19.0.0
• Chrome Version 128.0.6613.120 (Official Build) (64-bit)
• Win10