Improve Visualization of Double and Triple Bonds in 3D Plot

[TharunKumarrA]

Description

Currently, double bonds are rendered as a single red line and triple bonds are rendered similarly in the 3D plot using Plotly.js. To enhance the visualization:

• Double bonds should be represented by two parallel lines.
• Triple bonds should be represented by three parallel lines.

This will provide a more accurate and visually distinct representation of chemical bonds in the 3D plot.

Acceptance Criteria

• Double bonds are visualized as two parallel lines.
• Triple bonds are visualized as three parallel lines.
• Bond spacing and alignment are visually consistent and scalable for different molecular structures.
• Implementation is integrated with the existing Plotly.js 3D plot logic.

Suggested Approach

1. Logic for Bond Rendering:

   • Modify the bond rendering logic in /src/App.js to handle multiple lines for double and triple bonds.
   • Adjust line positions by offsetting them slightly along perpendicular directions.

2. Testing:

   • Validate the visualization using test molecules with double and triple bonds (e.g., ethene, acetylene).
   • Ensure bonds do not overlap and align correctly in 3D space.

3. Integration with Plotly.js:

   • Use Plotly.js scatter3d traces to render additional lines for double and triple bonds.
   • Ensure performance remains optimal for real-time visualization.

---

File Locations for Implementation

File: /src/App.js

• Update Plotly.js logic for bond rendering:
  • Add multiple traces for double and triple bonds.
  • Use offsets to position the additional lines.

---

Code Changes

In App.js

Modify the bond rendering logic for double bonds:

if (connection.isDoubleBond) {
  // Main line
  traceDoubleBonds.x.push(atom.coordinates[0], connectedAtom.coordinates[0], null);
  traceDoubleBonds.y.push(atom.coordinates[1], connectedAtom.coordinates[1], null);
  traceDoubleBonds.z.push(atom.coordinates[2], connectedAtom.coordinates[2], null);

  // Offset line
  traceDoubleBonds.x.push(atom.coordinates[0] + 0.01, connectedAtom.coordinates[0] + 0.01, null);
  traceDoubleBonds.y.push(atom.coordinates[1], connectedAtom.coordinates[1], null);
  traceDoubleBonds.z.push(atom.coordinates[2] + 0.01, connectedAtom.coordinates[2], null);
}

Modify the Bond Rendering Logic for Triple Bonds

if (connection.isTripleBond) {
  // Main line
  traceTripleBonds.x.push(atom.coordinates[0], connectedAtom.coordinates[0], null);
  traceTripleBonds.y.push(atom.coordinates[1], connectedAtom.coordinates[1], null);
  traceTripleBonds.z.push(atom.coordinates[2], connectedAtom.coordinates[2], null);

  // Offset lines
  traceTripleBonds.x.push(atom.coordinates[0] + 0.01, connectedAtom.coordinates[0] + 0.01, null);
  traceTripleBonds.y.push(atom.coordinates[1] + 0.01, connectedAtom.coordinates[1] + 0.01, null);
  traceTripleBonds.z.push(atom.coordinates[2] + 0.01, connectedAtom.coordinates[2] + 0.01, null);

  traceTripleBonds.x.push(atom.coordinates[0] - 0.01, connectedAtom.coordinates[0] - 0.01, null);
  traceTripleBonds.y.push(atom.coordinates[1] - 0.01, connectedAtom.coordinates[1] - 0.01, null);
  traceTripleBonds.z.push(atom.coordinates[2] - 0.01, connectedAtom.coordinates[2] - 0.01, null);
}

Testing Molecules

• Double Bond Example: Ethene (C₂H₄)
• Triple Bond Example: Acetylene (C₂H₂)

[sanggitsaaran]

@TharunKumarrA ,I would like to work on this issue

[TharunKumarrA]

Yes @sanggitsaaran assigned

[sanggitsaaran]

@TharunKumarrA The double bond representation as two parallel lines has been successfully implemented and is visible in the 3D plot. However, triple bond visualization is still incomplete, as three parallel lines are not currently rendered correctly. Issues with bond spacing and alignment need to be addressed, But I faced issues in the 3D plot cause the area which it occupies in not same for all structures. These inconsistencies are especially noticeable when visualizing small and large molecules, as the current uniform atom size causes bonds to overlap or become misaligned in certain structures.

To ensure scalability and consistency, adjustments in bond spacing logic relative to atomic radii or molecule size may be required. Comprehensive testing with complex carbon-based molecular structures is recommended to validate the visualization improvements. Once these enhancements are finalized, the changes can be effectively integrated into the repository.

Change References attached as Screenshots:-

Challenges Faced:-

1. Due to planar structure of C6H6 molecule, Double bond rendering in Y-axis was Difficult.
   
2. In C2H2 molecule, Triple bond couldn't be visualized in the 3D plot, Any molecule with Triple bond couldn't be visualized.
   

Suggest any ideas to overcome these issues.

[TharunKumarrA]

I will get back regarding the issue shortly. Please be patient @sanggitsaaran