feat: properly format ion names using chemical nomenclature (e.g. ZN -> Zn)

Author: AmirMohammad Cheraghali

src/components/Controls.tsx

@@ -31,18 +31,19 @@ import {
     Share2
 } from 'lucide-react';
 import type { RepresentationType, ColoringType, ChainInfo, CustomColorRule, Snapshot, Movie, ColorPalette, PDBMetadata } from '../types';
+import { formatChemicalId } from '../utils/pdbUtils';
 
 // Reusable Sidebar Section Component - Defined outside to prevent re-renders losing focus
 const SidebarSection = ({ title, icon: Icon, children, isOpen, onToggle, isLightMode }: { title: string, icon: any, children: React.ReactNode, isOpen: boolean, onToggle: () => void, isLightMode: boolean }) => (
     <div className={`rounded-xl overflow-hidden transition-colors ${isLightMode
-            ? 'border border-neutral-900 bg-white'
-            : 'border border-white/10 bg-black/20'
+        ? 'border border-neutral-900 bg-white'
+        : 'border border-white/10 bg-black/20'
         }`}>
         <button
             onClick={onToggle}
             className={`w-full flex items-center justify-between p-3 text-xs font-bold uppercase tracking-wider transition-colors ${isLightMode
-                    ? (isOpen ? 'bg-neutral-100 text-black' : 'hover:bg-neutral-50 text-neutral-900 hover:text-black')
-                    : (isOpen ? 'bg-white/5 text-blue-400' : 'hover:bg-white/5 text-neutral-400')
+                ? (isOpen ? 'bg-neutral-100 text-black' : 'hover:bg-neutral-50 text-neutral-900 hover:text-black')
+                : (isOpen ? 'bg-white/5 text-blue-400' : 'hover:bg-white/5 text-neutral-400')
                 }`}
         >
             <div className="flex items-center gap-2">
@@ -757,7 +758,7 @@ export const Controls: React.FC<ControlsProps> = ({
                                 <div className="flex flex-wrap gap-1">
                                     {ligands.map(lig => (
                                         <span key={lig} className="px-1.5 py-0.5 rounded text-[10px] font-mono bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 border border-neutral-300 dark:border-neutral-600">
-                                            {lig}
+                                            {formatChemicalId(lig)}
                                         </span>
                                     ))}
                                 </div>

src/utils/pdbUtils.ts

@@ -63,3 +63,16 @@ export const fetchPDBMetadata = async (pdbId: string): Promise<PDBMetadata | nul
         return null;
     }
 };
+
+/**
+ * Formats a PDB Ligand ID to Chemical Nomenclature.
+ * Specifically converts 1-2 letter codes (Ions) to Title Case (ZN -> Zn).
+ * Keeps 3+ letter codes (Molecules) as Uppercase (HEM -> HEM).
+ */
+export const formatChemicalId = (id: string): string => {
+    if (!id) return '';
+    if (id.length <= 2) {
+        return id.charAt(0).toUpperCase() + id.slice(1).toLowerCase();
+    }
+    return id.toUpperCase();
+};

src/utils/pdfGenerator.ts

@@ -1,6 +1,7 @@
 import jsPDF from 'jspdf';
 import autoTable from 'jspdf-autotable';
-import QRCode from 'qrcode'; // Import QR Code
+import QRCode from 'qrcode';
+import { formatChemicalId } from './pdbUtils'; // Import QR Code
 import { getInteractionType } from './interactionUtils';
 import type { PDBMetadata } from '../types';
 
@@ -723,8 +724,8 @@ const addLigandSection = (doc: jsPDF, interactions: import('../types').LigandInt
         doc.setFillColor(243, 244, 246); // Gray-100
         doc.rect(margin, y - 5, 180, 8, 'F');
 
-        // E.g. "CD #1 (Chain A)", "CD #2 (Chain A)"
-        doc.text(`${ligand.ligandName} #${count} (Chain ${ligand.ligandChain})`, margin + 3, y + 1);
+        // E.g. "Cd #1 (Chain A)", "Cd #2 (Chain A)"
+        doc.text(`${formatChemicalId(ligand.ligandName)} #${count} (Chain ${ligand.ligandChain})`, margin + 3, y + 1);
         y += 8;
 
         // Table