Feat: Update Tour Guide with new features (Transparency, Timeline) and add ID hooks

Author: AmirMohammad Cheraghali

src/components/Controls.tsx

@@ -1414,7 +1414,7 @@ export const Controls: React.FC<ControlsProps> = ({
 
                                         {/* ADVANCED COLORS WRAPPER */}
                                         {setCustomColors && (
-                                            <div className="col-span-2 pt-2 border-t border-white/5 space-y-2">
+                                            <div id="custom-color-controls" className="col-span-2 pt-2 border-t border-white/5 space-y-2">
                                                 <div className="flex items-center justify-between mb-1">
                                                     <div className={`text-[10px] font-bold uppercase tracking-wider ${subtleText} opacity-80`}>
                                                         Advanced Colors
@@ -1602,7 +1602,7 @@ export const Controls: React.FC<ControlsProps> = ({
                                         {/* TRANSPARENCY WRAPPER */}
                                         {/* Always render, prop is required */}
                                         {true && (
-                                            <div className="col-span-2 pt-2 border-t border-white/5 space-y-2">
+                                            <div id="transparency-controls" className="col-span-2 pt-2 border-t border-white/5 space-y-2">
                                                 <div className="flex items-center justify-between mb-1">
                                                     <div className={`text-[10px] font-bold uppercase tracking-wider ${subtleText} opacity-80`}>
                                                         Transparency

src/components/ProteinViewer.tsx

@@ -1667,8 +1667,7 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
                         if (dataSource === 'pubchem' && cleanId.length < 1) return null;
 
                         let url = getStructureUrl(cleanId, dataSource);
-                        // Request Biological Unit 1 for proper viral/assembly visualization
-                        let loadParams: any = { defaultRepresentation: false, assembly: 'bu1' };
+                        let loadParams: any = { defaultRepresentation: false };
 
                         // Add extension hint for NGL if needed
                         if (dataSource === 'pubchem') loadParams.ext = 'sdf';
@@ -2420,7 +2419,7 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
             }
 
             // Handle "Force Element" for single chains/chemicals when default 'chainid' is picked
-            const chainCount = component.structure && component.structure.chainStore ? component.structure.chainStore.count : 0;
+            const chainCount = component.structure ? component.structure.chainStore.count : 0;
             if (finalColor === 'chainid' && (chainCount <= 1 || dataSource === 'pubchem')) {
                 finalColor = 'element';
             }
@@ -2579,11 +2578,9 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
             // Fix: High Contrast for Chains
             // If coloring by chain, ignore the global aesthetic palette (often monotonic like Magma) 
             // and force a high-contrast Rainbow (Spectral) to ensure distinct chain colors.
-            // If coloring by chain, ignore the global aesthetic palette (often monotonic like Magma) 
-            // and force a high-contrast Rainbow (Spectral) to ensure distinct chain colors.
             if (finalColor === 'chainindex') {
                 params.colorScale = 'Spectral';
-            } else if (scale && Array.isArray(scale) && scale.length > 0) {
+            } else if (scale && scale.length > 0) {
                 params.colorScale = scale;
             }
 

src/components/TourGuide.tsx

@@ -39,6 +39,20 @@ export const startOnboardingTour = (onComplete?: () => void, onHighlight?: (elem
                     : 'Change representations (Cartoon, Surface) and use Smart Coloring or Custom Colors to highlight specific residues.'
             }
         },
+        {
+            element: '#custom-color-controls',
+            popover: {
+                title: 'Advanced Custom Colors',
+                description: 'Apply specific colors to individual residues or entire chains. Useful for highlighting active sites or specific domains.'
+            }
+        },
+        {
+            element: '#transparency-controls',
+            popover: {
+                title: 'Transparency Rules',
+                description: 'Make specific parts of the structure transparent to reveal internal details. You can target chains or specific residue ranges.'
+            }
+        },
         {
             element: '#viewport-controls',
             popover: {
@@ -55,6 +69,13 @@ export const startOnboardingTour = (onComplete?: () => void, onHighlight?: (elem
                     : 'Analyze structures with Superposition, Contact Maps, and precise Distance Measurements.'
             }
         },
+        {
+            element: '#video-timeline',
+            popover: {
+                title: 'Studio Timeline',
+                description: 'Edit your recorded sessions. Trim clips, adjust start times, and arrange your production before exporting.'
+            }
+        },
         // Sequence Track (Atom List) - Desktop Only
         ...(window.innerWidth >= 768 ? [{
             element: '#sequence-track',

src/components/VideoTimeline.tsx

@@ -393,7 +393,7 @@ export const VideoTimeline = ({
     const eventBlocks = getEventBlocks();
 
     return (
-        <div className="space-y-2">
+        <div id="video-timeline" className="space-y-2">
             {/* Timeline Toolbar */}
             <div className="flex justify-between items-center text-xs px-1">
                 <div className="opacity-60 font-mono">

src/utils/pdbUtils.ts

@@ -26,7 +26,7 @@ export const fetchPDBMetadata = async (pdbId: string): Promise<PDBMetadata | nul
         const method = data.exptl?.[0]?.method || 'Unknown';
 
         let resolution = 'N/A';
-        if (data.rcsb_entry_info?.resolution_combined && Array.isArray(data.rcsb_entry_info.resolution_combined) && data.rcsb_entry_info.resolution_combined.length > 0) {
+        if (data.rcsb_entry_info?.resolution_combined && data.rcsb_entry_info.resolution_combined.length > 0) {
             resolution = `${data.rcsb_entry_info.resolution_combined[0].toFixed(2)} Å`;
         } else if (data.refine?.[0]?.ls_d_res_high) {
             resolution = `${data.refine[0].ls_d_res_high.toFixed(2)} Å`;
@@ -36,9 +36,9 @@ export const fetchPDBMetadata = async (pdbId: string): Promise<PDBMetadata | nul
 
         // Organism from Entity 1
         let organism = 'Unknown source';
-        if (entityData.rcsb_entity_source_organism && Array.isArray(entityData.rcsb_entity_source_organism) && entityData.rcsb_entity_source_organism.length > 0) {
+        if (entityData.rcsb_entity_source_organism && entityData.rcsb_entity_source_organism.length > 0) {
             organism = entityData.rcsb_entity_source_organism[0].scientific_name;
-        } else if (data.rcsb_entity_source_organism && Array.isArray(data.rcsb_entity_source_organism) && data.rcsb_entity_source_organism.length > 0) {
+        } else if (data.rcsb_entity_source_organism && data.rcsb_entity_source_organism.length > 0) {
             organism = data.rcsb_entity_source_organism[0].scientific_name; // Fallback to entry if present (rare)
         }
 
@@ -76,7 +76,7 @@ export const getStructureUrl = (id: string, source: DataSource): string => {
     switch (source) {
         case 'pubchem': return `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/${id}/record/SDF/?record_type=3d`;
         case 'alphafold': return `https://alphafold.ebi.ac.uk/files/AF-${id}-F1-model_v4.pdb`;
-        case 'pdb': default: return `https://models.rcsb.org/${id}.mmtf`; // Use MMTF for efficient Biological Assembly loading
+        case 'pdb': default: return `https://files.rcsb.org/download/${id}.pdb`; // Explicitly use PDB format
     }
 };