Enhance chemical metadata: Show 2D structure image for PubChem entries

Author: AmirMohammad Cheraghali

src/components/Controls.tsx

@@ -597,15 +597,28 @@ export const Controls: React.FC<ControlsProps> = ({
                                             </div>
                                         )}
 
-                                        {/* Source / ID */}
+                                        {/* Structure Image or Source */}
                                         <div
                                             className={`pt-1 border-t border-neutral-200 dark:border-neutral-800 ${(pdbMetadata.formula || pdbMetadata.molecularWeight) ? 'pl-2 border-l' : ''}`}
                                             style={{ borderTopStyle: 'dashed' }}
                                         >
-                                            <span className={`text-[9px] font-bold uppercase tracking-wider block ${subtleText}`}>Source</span>
-                                            <span className={`text-[10px] font-medium block ${isLightMode ? 'text-neutral-800' : 'text-neutral-200'}`}>
-                                                {pdbMetadata.title}
+                                            <span className={`text-[9px] font-bold uppercase tracking-wider block ${subtleText}`}>
+                                                {pdbMetadata.cid ? 'Structure' : 'Source'}
                                             </span>
+
+                                            {pdbMetadata.cid ? (
+                                                <div className="mt-1 bg-white p-1 rounded-sm flex justify-center border border-neutral-200">
+                                                    <img
+                                                        src={`https://pubchem.ncbi.nlm.nih.gov/image/imgsrv.fcgi?cid=${pdbMetadata.cid}&t=l`}
+                                                        alt="2D Structure"
+                                                        className="h-20 w-auto object-contain mix-blend-multiply"
+                                                    />
+                                                </div>
+                                            ) : (
+                                                <span className={`text-[10px] font-medium block ${isLightMode ? 'text-neutral-800' : 'text-neutral-200'}`}>
+                                                    {pdbMetadata.title}
+                                                </span>
+                                            )}
                                         </div>
                                     </>
                                 )}

src/types.ts

@@ -84,6 +84,7 @@ export interface PDBMetadata {
     title?: string;
     formula?: string; // Chemical Formula
     molecularWeight?: number; // Molecular Weight
+    cid?: string; // PubChem CID for 2D Image
 }
 
 export interface LigandInteraction {

src/utils/pdbUtils.ts

@@ -96,7 +96,8 @@ export const fetchPubChemMetadata = async (cid: string): Promise<PDBMetadata | n
             depositionDate: 'N/A',
             title: props.IUPACName || props.Title || `PubChem CID ${cid}`,
             formula: props.MolecularFormula,
-            molecularWeight: props.MolecularWeight ? parseFloat(props.MolecularWeight) : undefined
+            molecularWeight: props.MolecularWeight ? parseFloat(props.MolecularWeight) : undefined,
+            cid: cid
         };
     } catch (e) {
         console.warn("PubChem metadata fetch failed", e);