feat: added interactive structure links to PDF report and deep-link support to viewer

Author: AmirMohammad Cheraghali

src/ViewerApp.tsx

@@ -48,6 +48,8 @@ import {
 } from 'lucide-react';
 import { startOnboardingTour } from './components/TourGuide';
 import { ViewportSelector } from './components/ViewportSelector';
+import { supabase } from './lib/supabase';
+import { getDownloadUrl } from './lib/structuresService';
 import { SnapshotModal } from './components/SnapshotModal';
 import { ToastContainer } from './components/Toast';
 import { useToast } from './hooks/useToast';
@@ -230,6 +232,39 @@ function App() {
         window.history.replaceState({}, '', url);
       }, 1000);
     }
+
+    // Direct Structure Load from URL
+    const structId = params.get('struct');
+    if (structId) {
+      const fetchAndLoad = async () => {
+        try {
+          const { data, error } = await supabase
+            .from('structures')
+            .select('*')
+            .eq('id', structId)
+            .single();
+          
+          if (error) throw error;
+          const url = await getDownloadUrl(data.file_path);
+          
+          const res = await fetch(url);
+          if (!res.ok) throw new Error('Failed to fetch structure file');
+          const blob = await res.blob();
+          
+          const file = new File([blob], `${data.name}.${data.file_type.toLowerCase()}`, { type: 'application/octet-stream' });
+          controllers[0].handleUpload(file, data.file_type.toLowerCase() === 'cif' || data.file_type.toLowerCase() === 'mmcif');
+          setShowLanding(false);
+          
+          // Clean URL
+          const newUrl = new URL(window.location.href);
+          newUrl.searchParams.delete('struct');
+          window.history.replaceState({}, '', newUrl);
+        } catch (err) {
+          console.error('Failed to load structure from URL:', err);
+        }
+      };
+      fetchAndLoad();
+    }
   }, []);
 
   // Parse Global URL State Once

src/components/dashboard/LabNotebook.tsx

@@ -261,11 +261,14 @@ export const LabNotebook: React.FC<{ isDrawer?: boolean }> = ({ isDrawer = false
                         scale: 2,
                         useCORS: true,
                         backgroundColor: '#ffffff',
-                        width: 794, // 8.27in at 96dpi
-                        height: 1122, // 11.69in at 96dpi
+                        width: 794, 
+                        height: 1122,
                     });
                     const imgData1 = canvas1.toDataURL('image/png');
                     pdf.addImage(imgData1, 'PNG', 0, 0, 210, 297);
+                    
+                    // Add links for Page 1 (usually empty of structure links but good for consistency)
+                    addLinksToPdf(page1, pdf, 0);
                 }
 
                 // Add Page 2: Content
@@ -281,10 +284,13 @@ export const LabNotebook: React.FC<{ isDrawer?: boolean }> = ({ isDrawer = false
                     });
                     const imgData2 = canvas2.toDataURL('image/png');
                     pdf.addImage(imgData2, 'PNG', 0, 0, 210, 297);
+                    
+                    // Add interactive links for Page 2
+                    addLinksToPdf(page2, pdf, 0);
                 }
 
                 pdf.save(`LabReport_${activeNotebook.title.replace(/\s+/g, '_') || 'Untitled'}.pdf`);
-                console.log('Multi-page PDF saved successfully.');
+                console.log('Multi-page PDF with links saved successfully.');
             }
         } catch (err) {
             console.error('Failed to export PDF:', err);
@@ -295,6 +301,27 @@ export const LabNotebook: React.FC<{ isDrawer?: boolean }> = ({ isDrawer = false
         }
     };
 
+    // Helper to add interactive links to the PDF
+    const addLinksToPdf = (pageElement: HTMLElement, pdf: jsPDF, yOffset: number) => {
+        const links = pageElement.querySelectorAll('.pdf-structure-link');
+        const pageRect = pageElement.getBoundingClientRect();
+        
+        // PDF is 210mm x 297mm. Input canvas/element is 794px x 1122px (at 96dpi)
+        // Ratio: 210 / 794 = 0.2645
+        const pxToMm = 210 / 794;
+        
+        links.forEach(link => {
+            const rect = link.getBoundingClientRect();
+            const relX = (rect.left - pageRect.left) * pxToMm;
+            const relY = (rect.top - pageRect.top) * pxToMm + yOffset;
+            const relW = rect.width * pxToMm;
+            const relH = rect.height * pxToMm;
+            
+            const url = (link as HTMLAnchorElement).href;
+            pdf.link(relX, relY, relW, relH, { url });
+        });
+    };
+
     if (!user) return null;
 
     return (
@@ -557,6 +584,7 @@ export const LabNotebook: React.FC<{ isDrawer?: boolean }> = ({ isDrawer = false
                         date={activeNotebook.created_at}
                         author={user?.email || 'Quercus User'}
                         id={activeNotebook.id.slice(0, 8)}
+                        allStructures={allStructures}
                     />
                 )}
             </div>

src/components/dashboard/LabReportTemplate.tsx

@@ -2,21 +2,23 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Microscope } from 'lucide-react';
+import type { Structure } from '../../lib/structuresService';
 
 interface LabReportTemplateProps {
   title: string;
   content: string;
   date: string;
   author: string;
   id: string;
+  allStructures?: Structure[];
 }
 
 /**
  * LabReportTemplate component for multi-page PDF generation.
  * Separated into Cover Page and Content Page.
  */
 export const LabReportTemplate = React.forwardRef<HTMLDivElement, LabReportTemplateProps>(
-  ({ title, content, date, author, id }, ref) => {
+  ({ title, content, date, author, id, allStructures = [] }, ref) => {
     return (
       <div 
         ref={ref}
@@ -42,15 +44,24 @@ export const LabReportTemplate = React.forwardRef<HTMLDivElement, LabReportTempl
           .pdf-page * {
             box-sizing: border-box !important;
           }
+          .pdf-structure-link {
+            color: #2563eb !important;
+            text-decoration: underline !important;
+            font-weight: 600 !important;
+            cursor: pointer !important;
+          }
         `}} />
 
+        {/* ... (rest of the component) ... */}
+
         {/* PAGE 1: COVER PAGE */}
         <div id="report-page-1" className="pdf-page" style={{ 
           display: 'flex', 
           flexDirection: 'column',
           justifyContent: 'center',
           textAlign: 'center'
         }}>
+          {/* ... (Cover Page content) ... */}
           <div style={{ marginBottom: '4rem', display: 'flex', justifyContent: 'center' }}>
             <div style={{ backgroundColor: '#0f172a', padding: '1.5rem', borderRadius: '1rem', display: 'inline-flex' }}>
               <Microscope size={64} color="#ffffff" />
@@ -114,7 +125,6 @@ export const LabReportTemplate = React.forwardRef<HTMLDivElement, LabReportTempl
 
         {/* PAGE 2: CONTENT PAGE */}
         <div id="report-page-2" className="pdf-page">
-          {/* Header on page 2 */}
           <div style={{ 
             display: 'flex', 
             justifyContent: 'space-between', 
@@ -139,7 +149,36 @@ export const LabReportTemplate = React.forwardRef<HTMLDivElement, LabReportTempl
                 h1: ({node, ...props}) => <h1 style={{fontSize: '1.875rem', fontWeight: 'bold', color: '#0f172a', marginBottom: '1rem', marginTop: '1rem'}} {...props} />,
                 h2: ({node, ...props}) => <h2 style={{fontSize: '1.5rem', fontWeight: 'bold', color: '#0f172a', marginTop: '2rem', marginBottom: '0.75rem'}} {...props} />,
                 h3: ({node, ...props}) => <h3 style={{fontSize: '1.25rem', fontWeight: 'bold', color: '#0f172a', marginTop: '1.5rem', marginBottom: '0.5rem'}} {...props} />,
-                p: ({node, ...props}) => <p style={{marginBottom: '1rem', lineHeight: '1.6'}} {...props} />,
+                p: ({children}) => {
+                  const processed = React.Children.map(children, child => {
+                    if (typeof child === 'string') {
+                      const parts = child.split(/(\[\[structure:[a-f0-9-]{36}\]\])/g);
+                      return parts.map((part, i) => {
+                        const match = part.match(/\[\[structure:([a-f0-9-]{36})\]\]/);
+                        if (match) {
+                          const sid = match[1];
+                          const s = allStructures.find(st => st.id === sid);
+                          const name = s?.name || sid.substring(0, 8);
+                          const url = `${window.location.origin}/?struct=${sid}`;
+                          return (
+                            <a 
+                              key={i} 
+                              href={url}
+                              className="pdf-structure-link"
+                              data-structure-id={sid}
+                              style={{ color: '#2563eb', textDecoration: 'underline', fontWeight: 'bold' }}
+                            >
+                              @{name}
+                            </a>
+                          );
+                        }
+                        return part;
+                      });
+                    }
+                    return child;
+                  });
+                  return <p style={{marginBottom: '1rem', lineHeight: '1.6'}}>{processed}</p>;
+                },
                 ul: ({node, ...props}) => <ul style={{listStyleType: 'disc', paddingLeft: '1.5rem', marginBottom: '1rem'}} {...props} />,
                 ol: ({node, ...props}) => <ol style={{listStyleType: 'decimal', paddingLeft: '1.5rem', marginBottom: '1rem'}} {...props} />,
                 li: ({node, ...props}) => <li style={{marginBottom: '0.5rem'}} {...props} />,
@@ -158,7 +197,6 @@ export const LabReportTemplate = React.forwardRef<HTMLDivElement, LabReportTempl
             </ReactMarkdown>
           </div>
 
-          {/* Footer on page 2 */}
           <div 
             style={{ 
               position: 'absolute',