Update Frontend to Support sp3d and sp3d2 Hybridization and Verify Visualization

[TharunKumarrA]

Description

The current frontend does not provide options for selecting sp3d (trigonal bipyramidal) and sp3d2 (octahedral) hybridizations. Update the UI to include these hybridizations and verify their correct visualization in 3D space using Plotly.js.

Acceptance Criteria

• Add options for sp3d and sp3d2 hybridizations in the frontend.
• Ensure correct bond angle representations for:
  • sp3d: 90° (axial), 120° (equatorial)
  • sp3d2: 90° for all bonds
• Verify the visualization is rendered correctly in the 3D space using Plotly.js.
• The visualization should align with standard geometries like PCl₅ (sp3d) and SF₆ (sp3d2).

Suggested Approach

1. Frontend Changes:

   • Update the UI components in /src/components/EditMolecule.jsx:
     • Add options for sp3d and sp3d2 hybridizations in dropdowns or selectors.
     • Pass the selected hybridization to the molecule construction logic.

2. Backend Integration: [Different issues - so optional]

   • Ensure getCoordinates() in Molecule.js supports sp3d and sp3d2 hybridizations.
   • Verify bond angle calculations in the visualization logic.

3. Testing Visualization:

   • Use standard test cases like PCl₅ and SF₆ to verify correct rendering in the 3D plot.
   • Cross-check the rendered bond angles with standard geometries.

---

File Locations for Implementation

File: /src/components/EditMolecule.jsx

• Update Functionality:
  • Add sp3d and sp3d2 options in the dropdown or radio buttons for hybridization.
  • Pass the selected hybridization to the molecule data structure.

File: /src/App.js

• Enhancements:
  • Ensure Plotly.js is updated to handle new bond angles and directions for sp3d and sp3d2 molecules.

---

Code Changes

In EditMolecule.jsx

Add options for sp3d and sp3d2 hybridizations:

<RadioGroup
  defaultValue="sp"
  row
  name="hybridization"
  onChange={handleAtomChange}
>
  <FormControlLabel value="sp" control={<Radio />} label="sp" />
  <FormControlLabel value="sp2" control={<Radio />} label="sp2" />
  <FormControlLabel value="sp3" control={<Radio />} label="sp3" />
  <FormControlLabel value="sp3d" control={<Radio />} label="sp3d" />
  <FormControlLabel value="sp3d2" control={<Radio />} label="sp3d2" />
</RadioGroup>

In getCoordinates() (Molecule.js)

Ensure correct handling of sp3d and sp3d2 bond angles:

if (currentAtom.hybridisation === "sp3d") {
  // Add logic for trigonal bipyramidal bond angles
} else if (currentAtom.hybridisation === "sp3d2") {
  // Add logic for octahedral bond angles
}

In App.js

Update the Plotly.js visualization logic:

const traceAtoms = {
  type: "scatter3d",
  mode: "markers+text",
  text: molecule.atomList.map((atom) => atom.atomSymbol),
  x: molecule.atomList.map((atom) => atom.coordinates[0]),
  y: molecule.atomList.map((atom) => atom.coordinates[1]),
  z: molecule.atomList.map((atom) => atom.coordinates[2]),
  marker: {
    size: 12,
    opacity: 0.8,
    color: molecule.atomList.map((atom) => {
      switch (atom.atomSymbol) {
        case "C":
          return "black";
        case "H":
          return "#87CEEB";
        default:
          return "#CD5C5C";
      }
    }),
  },
};

Dependencies

• This issue depends on the completion of Implement Algorithm for sp3d (Trigonal Bipyramidal) Bond Angles #2 and Implement Algorithm for Calculating Angles in sp3d2 Hybridization #3 before it can be worked on.