Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DocMap Agent - R&D Accelerator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/Lucide.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Base styles */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f9fafb; | |
| } | |
| .doc-link, .flow-link { cursor: pointer; color: #2563eb; text-decoration: underline; font-weight: 500; } | |
| .doc-link:hover, .flow-link:hover { color: #1d4ed8; } | |
| .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; } | |
| .custom-scroll::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 3px; } | |
| .custom-scroll::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; } | |
| .custom-scroll::-webkit-scrollbar-thumb:hover { background: #6b7280; } | |
| .lucide { vertical-align: -0.125em; display: inline-block; margin-right: 0.35rem; } | |
| .main-tab { transition: all 0.2s ease-in-out; border-bottom-width: 3px; border-color: transparent; } | |
| .main-tab.active { border-color: #2563eb; color: #1e40af; font-weight: 600; } | |
| #documentGraphContainerInModal, #flowsContainer { min-height: 200px; } | |
| .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; } | |
| .modal-content { background-color: #fefefe; padding: 0; border: 1px solid #888; width: 90%; max-width: 1000px; border-radius: 8px; position: relative; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } | |
| .modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } | |
| .modal-title { font-size: 1.25rem; font-weight: 600; color: #374151; } | |
| .modal-close { color: #9ca3af; background: none; border: none; font-size: 1.75rem; font-weight: bold; cursor: pointer; padding: 0; line-height: 1; } | |
| .modal-close:hover, .modal-close:focus { color: #1f2937; text-decoration: none; } | |
| .modal-body { padding: 1.5rem; overflow-y: auto; flex-grow: 1; } | |
| .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } | |
| .nav-button { background-color: #e5e7eb; color: #374151; padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } | |
| .nav-button:hover:not(:disabled) { background-color: #d1d5db; } | |
| .nav-button:disabled { opacity: 0.5; cursor: not-allowed; } | |
| .mermaid text, .mermaid tspan { user-select: text ; -webkit-user-select: text ; -moz-user-select: text ; -ms-user-select: text ; } | |
| .mermaid .node { cursor: pointer; } | |
| .hidden-container { display: none ; } | |
| /* Dashboard Card Specific Styles */ | |
| .dashboard-card { transition: all 0.3s ease; } | |
| .dashboard-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } | |
| /* Document item enhancements */ | |
| .document-item { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .document-item:hover { | |
| transform: translateX(5px); | |
| background-color: #f8fafc; | |
| } | |
| /* Phase-specific colors */ | |
| .document-item[data-phase="Discovery"] { border-left-color: #3b82f6; } | |
| .document-item[data-phase="Preclinical"] { border-left-color: #10b981; } | |
| .document-item[data-phase="Clinical Phase 1"] { border-left-color: #6366f1; } | |
| .document-item[data-phase="Clinical Phase 2"] { border-left-color: #8b5cf6; } | |
| .document-item[data-phase="Clinical Phase 3"] { border-left-color: #a855f7; } | |
| .document-item[data-phase="Clinical (All Phases)"] { border-left-color: #7c3aed; } | |
| .document-item[data-phase="Regulatory Submission"] { border-left-color: #ec4899; } | |
| .document-item[data-phase="Post-Marketing"] { border-left-color: #f59e0b; } | |
| /* Tab styles for document detail modal */ | |
| .details-tabs { | |
| display: flex; | |
| border-bottom: 1px solid #e5e7eb; | |
| margin-bottom: 1rem; | |
| } | |
| .details-tab { | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| border-bottom: 3px solid transparent; | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| } | |
| .details-tab.active { | |
| border-bottom-color: #3b82f6; | |
| color: #1e40af; | |
| } | |
| .details-tab:hover:not(.active) { | |
| border-bottom-color: #e5e7eb; | |
| } | |
| .details-content { | |
| display: none; | |
| } | |
| .details-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| /* Dependency graph styles */ | |
| .dependency-graph { | |
| width: 100%; | |
| height: 400px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| overflow: hidden; | |
| } | |
| /* Flow card styles */ | |
| .flow-card { | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| background-color: white; | |
| } | |
| .flow-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| border-color: #3b82f6; | |
| } | |
| .flow-card.active { | |
| border-color: #3b82f6; | |
| background-color: #eff6ff; | |
| } | |
| /* Loading spinner */ | |
| .loading-spinner { | |
| width: 40px; | |
| height: 40px; | |
| margin: 2rem auto; | |
| border-radius: 50%; | |
| border: 4px solid #e5e7eb; | |
| border-top-color: #3b82f6; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Text truncation utility */ | |
| .line-clamp-2 { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| </style> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗺️</text></svg>"> | |
| </head> | |
| <body class="flex flex-col h-screen"> | |
| <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-md p-4 flex items-center justify-between flex-shrink-0"> | |
| <div class="flex items-center space-x-3"> | |
| <span id="logo-placeholder" class="inline-block bg-white rounded-full p-1 leading-none"> | |
| <i class="lucide lucide-map text-blue-700 text-2xl"></i> | |
| </span> | |
| <h1 class="text-2xl font-bold">DocMap Agent</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="homeButton" class="text-white hover:text-blue-200 flex items-center text-sm"> | |
| <i class="lucide lucide-home"></i> Home | |
| </button> | |
| <div class="relative hidden md:block"> | |
| <input type="text" id="headerSearchInput" placeholder="Search all docs..." class="bg-blue-500 placeholder-blue-200 text-white rounded-full py-1.5 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-white"> | |
| <i class="lucide lucide-search absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-200"></i> | |
| </div> | |
| <button id="showExampleFlowBtn" class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-2 px-4 rounded-md shadow text-sm flex items-center"> | |
| <i class="lucide lucide-git-fork"></i> Show Example Flow | |
| </button> | |
| </div> | |
| </header> | |
| <div class="bg-gray-100 border-b border-gray-200 px-4 py-2 text-sm flex-shrink-0"> | |
| <nav id="breadcrumbNav" aria-label="Breadcrumb"> | |
| <span class="text-gray-500">Home</span> | |
| </nav> | |
| </div> | |
| <main id="mainContentArea" class="flex-1 overflow-y-auto p-4 md:p-6"> | |
| <section id="home" class="space-y-6"> | |
| <div class="bg-white rounded-lg shadow p-6 text-center"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Welcome to DocMap Agent</h2> | |
| <p class="text-gray-600">A comprehensive R&D document authoring accelerator</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div data-target-view="documentViewWrapper" data-initial-tab="All" class="dashboard-card bg-white rounded-lg shadow p-6 text-center cursor-pointer flex flex-col items-center"> | |
| <i class="lucide lucide-book-open text-4xl text-blue-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Document Catalog</h3> | |
| <p class="text-sm text-gray-500 mb-4 flex-grow">Browse and search all document types across R&D phases.</p> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md text-sm w-full">Explore</button> | |
| </div> | |
| <div data-target-view="flowsViewWrapper" data-initial-tab="Flows" class="dashboard-card bg-white rounded-lg shadow p-6 text-center cursor-pointer flex flex-col items-center"> | |
| <i class="lucide lucide-git-fork text-4xl text-purple-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Process Visualization</h3> | |
| <p class="text-sm text-gray-500 mb-4 flex-grow">Visualize document workflows and dependencies.</p> | |
| <button class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md text-sm w-full">Explore</button> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6 text-center flex flex-col items-center opacity-70 cursor-not-allowed"> | |
| <i class="lucide lucide-clipboard-check text-4xl text-yellow-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Assessment Tools</h3> | |
| <p class="text-sm text-gray-500 mb-4 flex-grow">Evaluate document ecosystem and identify gaps (Coming Soon).</p> | |
| <button disabled class="bg-yellow-400 text-white font-medium py-2 px-4 rounded-md text-sm w-full cursor-not-allowed">Explore</button> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6 text-center flex flex-col items-center opacity-70 cursor-not-allowed"> | |
| <i class="lucide lucide-file-text text-4xl text-green-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Document Blueprints</h3> | |
| <p class="text-sm text-gray-500 mb-4 flex-grow">Access templates and prompt libraries (Coming Soon).</p> | |
| <button disabled class="bg-green-400 text-white font-medium py-2 px-4 rounded-md text-sm w-full cursor-not-allowed">Explore</button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 mt-6"> | |
| <h3 class="font-semibold text-gray-700 mb-3">Recent Updates</h3> | |
| <ul class="text-sm text-gray-600 space-y-1"> | |
| <li><span class="text-gray-400 mr-2">[April 6, 2025]</span>Enhanced document visualization system launched.</li> | |
| <li><span class="text-gray-400 mr-2">[April 5, 2025]</span>Added IND pathway and clinical program flows.</li> | |
| <li><span class="text-gray-400 mr-2">[April 4, 2025]</span>Integrated 20 document templates into the system.</li> | |
| </ul> | |
| </div> | |
| </section> | |
| <section id="documentViewWrapper" class="hidden-container flex flex-col flex-1 gap-4 overflow-hidden"> | |
| <div class="bg-white rounded-lg shadow p-3 flex-shrink-0"> | |
| <div id="mainTabsDocView" class="flex space-x-4 border-b border-gray-200 overflow-x-auto custom-scroll pb-1"> | |
| <span class="text-gray-500">Loading phases...</span> | |
| </div> | |
| </div> | |
| <div class="relative flex-shrink-0 bg-white rounded-lg shadow p-4"> | |
| <input type="text" id="searchInputDocView" placeholder="Search documents in selected phase (or all)..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"> | |
| <i class="lucide lucide-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 ml-4"></i> | |
| </div> | |
| <div id="documentListDocView" class="bg-white rounded-lg shadow flex-1 overflow-y-auto custom-scroll p-4"> | |
| <p class="text-gray-500 text-center py-4">Select a phase tab above.</p> | |
| </div> | |
| </section> | |
| <section id="flowsViewWrapper" class="hidden-container flex-1 bg-white rounded-lg shadow p-4 overflow-hidden flex flex-col gap-4"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-2 flex items-center flex-shrink-0"> | |
| <i class="lucide lucide-git-fork mr-2 text-purple-600"></i> Process Flows | |
| </h2> | |
| <div class="flex flex-1 gap-4 overflow-hidden"> | |
| <div class="w-full md:w-1/4 border-r pr-4 border-gray-200 overflow-y-auto custom-scroll"> | |
| <div id="flowsList" class="space-y-3"> | |
| <p class="text-gray-500">Loading flows...</p> | |
| </div> | |
| <button id="showExampleFlowBtnFlowView" class="mt-4 bg-gray-100 text-gray-700 hover:bg-gray-200 font-medium py-1.5 px-3 rounded-md shadow-sm text-xs flex items-center w-full text-left"> | |
| <i class="lucide lucide-presentation"></i> Show Example P1 Flow | |
| </button> | |
| </div> | |
| <div id="flowsContainer" class="w-full md:w-3/4 overflow-auto custom-scroll bg-gray-50 rounded"> | |
| <p id="flowPlaceholder" class="text-gray-500 text-center py-10 px-4">Select a flow from the list to view the process graph.</p> | |
| <div id="mermaidFlowGraph" class="mermaid w-full h-full p-4"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <div id="exampleFlowModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title">Example Flow: Phase 1 SAD Study Documents</h2> | |
| <button class="modal-close" id="closeExampleModalBtn">×</button> | |
| </div> | |
| <div class="modal-body custom-scroll"> | |
| <div id="exampleMermaidGraph" class="mermaid text-sm"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="detailsModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 id="detailsModalTitle" class="modal-title">Document Details</h2> | |
| <button class="modal-close" id="closeDetailsModalBtn">×</button> | |
| </div> | |
| <div class="modal-body custom-scroll"> | |
| <div id="detailsModalContent" class="flex flex-col w-full"> | |
| <div id="detailsContentInModal" class="text-gray-600 text-sm"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button id="prevDocBtn" class="nav-button" disabled><i class="lucide lucide-arrow-left"></i> Previous</button> | |
| <button id="nextDocBtn" class="nav-button" disabled>Next <i class="lucide lucide-arrow-right"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="loadingSpinner" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white p-8 rounded-lg shadow-lg flex flex-col items-center"> | |
| <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div> | |
| <p class="text-gray-700 font-medium">Loading DocMap Agent...</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Mermaid | |
| mermaid.initialize({ | |
| startOnLoad: false, | |
| theme: 'base', | |
| securityLevel: 'loose', | |
| themeVariables: { | |
| primaryColor: '#eff6ff', | |
| primaryTextColor: '#1e3a8a', | |
| primaryBorderColor: '#60a5fa', | |
| lineColor: '#6b7280', | |
| secondaryColor: '#f1f5f9', | |
| tertiaryColor: '#e0f2fe' | |
| } | |
| }); | |
| // --- Global Variables --- | |
| let documentsData = []; | |
| let templateData = []; | |
| const flowDefinitions = { | |
| "p1_sad": `graph TD; subgraph Preclinical & Setup; IB(IB v1):::input --> CLI-PROT-P1(Phase 1 Protocol):::core; PRE-REP-TOX(Tox Report):::input --> IB; PRE-REP-PK(PK Report):::input --> IB; PRE-REP-CMC-STAB(Stability Report):::input --> IB; CLI-PROT-P1 --> REG-SUB-IND(IND / CTA):::output; CLI-PROT-P1 --> ICF(Informed Consent Form):::output; CLI-PROT-P1 --> CRF(eCRF Spec):::output; CLI-PROT-P1 --> CLI-PLAN-SAP(Stat Analysis Plan):::output; CLI-PROT-P1 --> CLI-PLAN-DMP(Data Mgt Plan):::output; CLI-PROT-P1 --> CLI-MAN-IMPHANDLE(IMP Handling Manual):::output; CLI-PROT-P1 --> CMC-LABEL-IMP(IMP Label Spec):::output; end; subgraph Execution & Reporting; ICF --> SiteOps[Site Operations / Enrollment]; CRF --> SiteOps; CLI-MAN-IMPHANDLE --> SiteOps; CMC-LABEL-IMP --> SiteOps; CLI-PLAN-DMP --> SiteOps; SiteOps --> ClinicalData[(Clinical Database)]; CLI-PLAN-SAP --> Analysis[Statistical Analysis]; ClinicalData --> Analysis; Analysis --> CLI-REP-CSR(Phase 1 CSR):::core; ClinicalData --> CLI-REP-CSR; IB --> CLI-REP-CSR; end; subgraph Updates & Follow-on; CLI-REP-CSR --> IB_v2(IB Update v2):::output; CLI-REP-CSR --> REG-AR(IND Annual Report / DSUR):::output; CLI-REP-CSR --> CLI-PLAN-CDP(Clinical Dev Plan Update):::output; end; classDef input fill:#f3e8ff,stroke:#a855f7,color:#581c87; classDef core fill:#e0f2fe,stroke:#38bdf8,color:#075985; classDef output fill:#f0fdf4,stroke:#4ade80,color:#15803d; click IB call displayDetailsAndGraphFromGraph("IB") "View Details"; click PRE-REP-TOX call displayDetailsAndGraphFromGraph("PRE-REP-TOX") "View Details"; click PRE-REP-PK call displayDetailsAndGraphFromGraph("PRE-REP-PK") "View Details"; click PRE-REP-CMC-STAB call displayDetailsAndGraphFromGraph("PRE-REP-CMC-STAB") "View Details"; click CLI-PROT-P1 call displayDetailsAndGraphFromGraph("CLI-PROT-P1") "View Details"; click REG-SUB-IND call displayDetailsAndGraphFromGraph("REG-SUB-IND") "View Details"; click ICF call displayDetailsAndGraphFromGraph("ICF") "View Details"; click CRF call displayDetailsAndGraphFromGraph("CRF") "View Details"; click CLI-PLAN-SAP call displayDetailsAndGraphFromGraph("CLI-PLAN-SAP") "View Details"; click CLI-PLAN-DMP call displayDetailsAndGraphFromGraph("CLI-PLAN-DMP") "View Details"; click CLI-MAN-IMPHANDLE call displayDetailsAndGraphFromGraph("CLI-MAN-IMPHANDLE") "View Details"; click CMC-LABEL-IMP call displayDetailsAndGraphFromGraph("CMC-LABEL-IMP") "View Details"; click CLI-REP-CSR call displayDetailsAndGraphFromGraph("CLI-REP-CSR") "View Details"; click IB_v2 call displayDetailsAndGraphFromGraph("IB") "View Details (Latest IB)"; click REG-AR call displayDetailsAndGraphFromGraph("REG-AR") "View Details"; click CLI-PLAN-CDP call displayDetailsAndGraphFromGraph("CLI-PLAN-CDP") "View Details";`, | |
| "nda_submission": `graph TD; subgraph Inputs; CSRs(All Phase 1-3 CSRs):::input --> REG-ISS(ISS):::core; CSRs --> REG-ISE(ISE):::core; NonClinReps(All Nonclinical Reports):::input --> REG-CTD-M2(CTD Module 2 Summaries):::core; CMCDataPkg(Full CMC Data Package):::input --> REG-CTD-M3(CTD Module 3 Quality):::core; ProposedLabel(Proposed Label / SmPC):::input --> REG-CTD-M1(CTD Module 1 Admin & Label):::core; end; subgraph CTD_Assembly; REG-ISS --> REG-CTD-M5(CTD Module 5 Clinical):::output; REG-ISE --> REG-CTD-M5; CSRs --> REG-CTD-M5; NonClinReps --> REG-CTD-M4(CTD Module 4 Nonclinical):::output; REG-CTD-M1 --> FullSubmission[eCTD Submission Package]; REG-CTD-M2 --> FullSubmission; REG-CTD-M3 --> FullSubmission; REG-CTD-M4 --> FullSubmission; REG-CTD-M5 --> FullSubmission; end; subgraph Submission_Output; FullSubmission --> REG-SUB-NDA(NDA / MAA Submission):::final; REG-SUB-NDA --> AgencyReview{Agency Review}; AgencyReview --> REG-RTQ(Responses to Questions):::input; REG-RTQ --> AgencyReview; AgencyReview --> ApprovalDecision[Approval / Rejection]; end; classDef input fill:#fef9c3,stroke:#eab308,color:#854d0e; classDef core fill:#e0f2fe,stroke:#38bdf8,color:#075985; classDef output fill:#f0fdf4,stroke:#4ade80,color:#15803d; classDef final fill:#fee2e2,stroke:#f87171,color:#991b1b; click CSRs call displayDetailsAndGraphFromGraph("CLI-REP-CSR") "View CSR Details (Example)"; click NonClinReps call displayDetailsAndGraphFromGraph("PRE-REP-TOX") "View Tox Report (Example)"; click CMCDataPkg call displayDetailsAndGraphFromGraph("PRE-REP-CMC-PROCDEV") "View CMC Report (Example)"; click ProposedLabel call displayDetailsAndGraphFromGraph("REG-LABEL-US") "View Label Details (Example)"; click REG-ISS call displayDetailsAndGraphFromGraph("REG-ISS") "View Details"; click REG-ISE call displayDetailsAndGraphFromGraph("REG-ISE") "View Details"; click REG-CTD-M1 call displayDetailsAndGraphFromGraph("REG-CTD-M1") "View Details"; click REG-CTD-M2 call displayDetailsAndGraphFromGraph("REG-CTD-M2") "View Details"; click REG-CTD-M3 call displayDetailsAndGraphFromGraph("REG-CTD-M3") "View Details"; click REG-CTD-M4 call displayDetailsAndGraphFromGraph("REG-CTD-M4") "View Details"; click REG-CTD-M5 call displayDetailsAndGraphFromGraph("REG-CTD-M5") "View Details"; click REG-SUB-NDA call displayDetailsAndGraphFromGraph("REG-SUB-NDA") "View Details"; click REG-RTQ call displayDetailsAndGraphFromGraph("REG-RTQ") "View Details";`, | |
| "ind_pathway": `graph TD; | |
| DIS-REP-TVAL(Target Validation Report):::discovery --> DIS-REP-LO(Lead Optimization Report):::discovery; | |
| DIS-REP-LO --> DIS-REP-CANDSEL(Candidate Selection Report):::discovery; | |
| DIS-REP-CANDSEL --> PRE-PLAN-DEV(Preclinical Development Plan):::preclinical; | |
| PRE-PLAN-DEV --> PRE-PROT-TOX(Toxicology Study Protocol):::preclinical; | |
| PRE-PLAN-DEV --> PRE-PROT-PK(PK Study Protocol):::preclinical; | |
| PRE-PLAN-DEV --> PRE-REP-CMC-PROCDEV(CMC Process Development):::preclinical; | |
| PRE-PROT-TOX --> PRE-REP-TOX(Toxicology Study Report):::preclinical; | |
| PRE-PROT-PK --> PRE-REP-PK(PK Study Report):::preclinical; | |
| PRE-REP-CMC-PROCDEV --> PRE-REP-CMC-STAB(Stability Report):::preclinical; | |
| PRE-REP-TOX --> IB(Investigator's Brochure):::clinical; | |
| PRE-REP-PK --> IB; | |
| PRE-REP-CMC-STAB --> IB; | |
| IB --> REG-SUB-IND(IND Submission):::regulatory; | |
| IB --> CLI-PROT-P1(Phase 1 Protocol):::clinical; | |
| CLI-PROT-P1 --> REG-SUB-IND; | |
| REG-SUB-IND --> CLI-REP-CSR(Clinical Study Reports):::clinical; | |
| classDef discovery fill:#dbeafe,stroke:#3b82f6,color:#1e40af; | |
| classDef preclinical fill:#dcfce7,stroke:#22c55e,color:#166534; | |
| classDef clinical fill:#ede9fe,stroke:#8b5cf6,color:#5b21b6; | |
| classDef regulatory fill:#fef3c7,stroke:#f59e0b,color:#92400e; | |
| click DIS-REP-TVAL call displayDetailsAndGraphFromGraph("DIS-REP-TVAL") "View Details"; | |
| click DIS-REP-LO call displayDetailsAndGraphFromGraph("DIS-REP-LO") "View Details"; | |
| click DIS-REP-CANDSEL call displayDetailsAndGraphFromGraph("DIS-REP-CANDSEL") "View Details"; | |
| click PRE-PLAN-DEV call displayDetailsAndGraphFromGraph("PRE-PLAN-DEV") "View Details"; | |
| click PRE-PROT-TOX call displayDetailsAndGraphFromGraph("PRE-PROT-TOX") "View Details"; | |
| click PRE-PROT-PK call displayDetailsAndGraphFromGraph("PRE-PROT-PK") "View Details"; | |
| click PRE-REP-CMC-PROCDEV call displayDetailsAndGraphFromGraph("PRE-REP-CMC-PROCDEV") "View Details"; | |
| click PRE-REP-TOX call displayDetailsAndGraphFromGraph("PRE-REP-TOX") "View Details"; | |
| click PRE-REP-PK call displayDetailsAndGraphFromGraph("PRE-REP-PK") "View Details"; | |
| click PRE-REP-CMC-STAB call displayDetailsAndGraphFromGraph("PRE-REP-CMC-STAB") "View Details"; | |
| click IB call displayDetailsAndGraphFromGraph("IB") "View Details"; | |
| click CLI-PROT-P1 call displayDetailsAndGraphFromGraph("CLI-PROT-P1") "View Details"; | |
| click REG-SUB-IND call displayDetailsAndGraphFromGraph("REG-SUB-IND") "View Details"; | |
| click CLI-REP-CSR call displayDetailsAndGraphFromGraph("CLI-REP-CSR") "View Details";`, | |
| "clinical_program": `graph TD; | |
| CLI-PLAN-TPP(Target Product Profile):::planning --> CLI-PLAN-CDP(Clinical Development Plan):::planning; | |
| CLI-PLAN-CDP --> CLI-PROT-P1(Phase 1 Protocol):::phase1; | |
| CLI-PLAN-CDP --> CLI-PROT-P2(Phase 2 Protocol):::phase2; | |
| CLI-PLAN-CDP --> CLI-PROT-P3(Phase 3 Protocol):::phase3; | |
| CLI-PROT-P1 --> ICF1(Phase 1 ICF):::phase1; | |
| CLI-PROT-P1 --> CRF1(Phase 1 CRF):::phase1; | |
| CLI-PROT-P1 --> CLI-PLAN-SAP1(Phase 1 SAP):::phase1; | |
| CLI-PROT-P2 --> ICF2(Phase 2 ICF):::phase2; | |
| CLI-PROT-P2 --> CRF2(Phase 2 CRF):::phase2; | |
| CLI-PROT-P2 --> CLI-PLAN-SAP2(Phase 2 SAP):::phase2; | |
| CLI-PROT-P3 --> ICF3(Phase 3 ICF):::phase3; | |
| CLI-PROT-P3 --> CRF3(Phase 3 CRF):::phase3; | |
| CLI-PROT-P3 --> CLI-PLAN-SAP3(Phase 3 SAP):::phase3; | |
| CLI-PROT-P3 --> CLI-CHARTER-DMC(DMC Charter):::phase3; | |
| CLI-PLAN-SAP1 --> CLI-REP-CSR1(Phase 1 CSR):::phase1; | |
| CLI-PLAN-SAP2 --> CLI-REP-CSR2(Phase 2 CSR):::phase2; | |
| CLI-PLAN-SAP3 --> CLI-REP-CSR3(Phase 3 CSR):::phase3; | |
| CLI-REP-CSR1 & CLI-REP-CSR2 & CLI-REP-CSR3 --> REG-ISS(Integrated Summary of Safety):::submission; | |
| CLI-REP-CSR2 & CLI-REP-CSR3 --> REG-ISE(Integrated Summary of Efficacy):::submission; | |
| REG-ISS & REG-ISE --> REG-SUB-NDA(NDA Submission):::submission; | |
| classDef planning fill:#dbeafe,stroke:#3b82f6,color:#1e40af; | |
| classDef phase1 fill:#ede9fe,stroke:#8b5cf6,color:#5b21b6; | |
| classDef phase2 fill:#fae8ff,stroke:#d946ef,color:#86198f; | |
| classDef phase3 fill:#fce7f3,stroke:#ec4899,color:#9d174d; | |
| classDef submission fill:#fee2e2,stroke:#f87171,color:#991b1b; | |
| click CLI-PLAN-TPP call displayDetailsAndGraphFromGraph("CLI-PLAN-TPP") "View Details"; | |
| click CLI-PLAN-CDP call displayDetailsAndGraphFromGraph("CLI-PLAN-CDP") "View Details"; | |
| click CLI-PROT-P1 call displayDetailsAndGraphFromGraph("CLI-PROT-P1") "View Details"; | |
| click CLI-PROT-P2 call displayDetailsAndGraphFromGraph("CLI-PROT-P2") "View Details"; | |
| click CLI-PROT-P3 call displayDetailsAndGraphFromGraph("CLI-PROT-P3") "View Details"; | |
| click ICF1 call displayDetailsAndGraphFromGraph("ICF") "View Details"; | |
| click CRF1 call displayDetailsAndGraphFromGraph("CRF") "View Details"; | |
| click CLI-PLAN-SAP1 call displayDetailsAndGraphFromGraph("CLI-PLAN-SAP") "View Details"; | |
| click ICF2 call displayDetailsAndGraphFromGraph("ICF") "View Details"; | |
| click CRF2 call displayDetailsAndGraphFromGraph("CRF") "View Details"; | |
| click CLI-PLAN-SAP2 call displayDetailsAndGraphFromGraph("CLI-PLAN-SAP") "View Details"; | |
| click ICF3 call displayDetailsAndGraphFromGraph("ICF") "View Details"; | |
| click CRF3 call displayDetailsAndGraphFromGraph("CRF") "View Details"; | |
| click CLI-PLAN-SAP3 call displayDetailsAndGraphFromGraph("CLI-PLAN-SAP") "View Details"; | |
| click CLI-CHARTER-DMC call displayDetailsAndGraphFromGraph("CLI-CHARTER-DMC") "View Details"; | |
| click CLI-REP-CSR1 call displayDetailsAndGraphFromGraph("CLI-REP-CSR") "View Details"; | |
| click CLI-REP-CSR2 call displayDetailsAndGraphFromGraph("CLI-REP-CSR") "View Details"; | |
| click CLI-REP-CSR3 call displayDetailsAndGraphFromGraph("CLI-REP-CSR") "View Details"; | |
| click REG-ISS call displayDetailsAndGraphFromGraph("REG-ISS") "View Details"; | |
| click REG-ISE call displayDetailsAndGraphFromGraph("REG-ISE") "View Details"; | |
| click REG-SUB-NDA call displayDetailsAndGraphFromGraph("REG-SUB-NDA") "View Details";` | |
| }; | |
| // --- DOM Elements Cache --- | |
| const mainContentArea = document.getElementById('mainContentArea'); | |
| const homeSection = document.getElementById('home'); | |
| const documentViewWrapper = document.getElementById('documentViewWrapper'); | |
| const flowsViewWrapper = document.getElementById('flowsViewWrapper'); | |
| const searchInputDocView = document.getElementById('searchInputDocView'); | |
| const headerSearchInput = document.getElementById('headerSearchInput'); | |
| const mainTabsDocViewContainer = document.getElementById('mainTabsDocView'); | |
| const documentListDocViewContainer = document.getElementById('documentListDocView'); | |
| const flowsListContainer = document.getElementById('flowsList'); | |
| const mermaidFlowGraphContainer = document.getElementById('mermaidFlowGraph'); | |
| const flowPlaceholder = document.getElementById('flowPlaceholder'); | |
| const showExampleFlowBtnFlowView = document.getElementById('showExampleFlowBtnFlowView'); | |
| const homeButton = document.getElementById('homeButton'); | |
| const breadcrumbNav = document.getElementById('breadcrumbNav'); | |
| // Modals | |
| const showExampleFlowBtnHeader = document.getElementById('showExampleFlowBtn'); | |
| const exampleFlowModal = document.getElementById('exampleFlowModal'); | |
| const exampleMermaidGraphContainer = document.getElementById('exampleMermaidGraph'); | |
| const closeExampleModalBtn = document.getElementById('closeExampleModalBtn'); | |
| const detailsModal = document.getElementById('detailsModal'); | |
| const detailsModalTitle = document.getElementById('detailsModalTitle'); | |
| const detailsContentInModal = document.getElementById('detailsContentInModal'); | |
| const closeDetailsModalBtn = document.getElementById('closeDetailsModalBtn'); | |
| const prevDocBtn = document.getElementById('prevDocBtn'); | |
| const nextDocBtn = document.getElementById('nextDocBtn'); | |
| const loadingSpinner = document.getElementById('loadingSpinner'); | |
| // --- State Variables --- | |
| let currentVisibleView = 'home'; | |
| let currentDocViewTab = 'All'; | |
| let currentSelectedDocId = null; | |
| let currentSelectedFlowId = null; | |
| let currentDocListIndices = { prev: null, next: null }; | |
| // --- Utility Functions --- | |
| function getDocNameById(docId) { | |
| const doc = documentsData.find(d => d.Doc_ID_Type === docId); | |
| return doc ? (doc.Document_Name.split('(')[0].trim() || doc.Document_Name) : docId; | |
| } | |
| function extractDocIDs(text) { | |
| if (!text || documentsData.length === 0) return []; | |
| const knownIDs = new Set(documentsData.map(doc => doc.Doc_ID_Type)); | |
| const potentialIDs = text.match(/[A-Z0-9]+(?:-[A-Z0-9]+)*\b/g) || []; | |
| return potentialIDs.filter(id => knownIDs.has(id)); | |
| } | |
| function getComplexityIcon(complexity) { | |
| switch (complexity?.toLowerCase()) { | |
| case 'low': return '<i class="lucide lucide-bar-chart text-green-500" title="Low Complexity"></i>'; | |
| case 'low-medium': return '<i class="lucide lucide-bar-chart-2 text-lime-500" title="Low-Medium Complexity"></i>'; | |
| case 'medium': return '<i class="lucide lucide-bar-chart-3 text-yellow-500" title="Medium Complexity"></i>'; | |
| case 'medium-high': return '<i class="lucide lucide-bar-chart-4 text-orange-500" title="Medium-High Complexity"></i>'; | |
| case 'high': return '<i class="lucide lucide-bar-chart-big text-red-500" title="High Complexity"></i>'; | |
| default: return ''; | |
| } | |
| } | |
| function getRegulatoryIcon(significance) { | |
| if (!significance) return ''; | |
| const lowerSig = significance.toLowerCase(); | |
| if (lowerSig.includes('submission critical')) return '<i class="lucide lucide-shield-check text-red-600" title="Submission Critical"></i>'; | |
| if (lowerSig.includes('gcp')) return '<i class="lucide lucide-clipboard-check text-blue-600" title="GCP Relevant"></i>'; | |
| if (lowerSig.includes('glp')) return '<i class="lucide lucide-flask-conical text-purple-600" title="GLP Relevant"></i>'; | |
| if (lowerSig.includes('gmp')) return '<i class="lucide lucide-factory text-indigo-600" title="GMP Relevant"></i>'; | |
| if (lowerSig.includes('gvp')) return '<i class="lucide lucide-activity text-teal-600" title="GVP Relevant"></i>'; | |
| if (lowerSig.includes('regulatory requirement')) return '<i class="lucide lucide-shield-alert text-orange-600" title="Regulatory Requirement"></i>'; | |
| if (lowerSig.includes('internal')) return '<i class="lucide lucide-home text-gray-500" title="Internal Governance/Strategy"></i>'; | |
| return '<i class="lucide lucide-shield text-gray-400" title="Regulatory Significance"></i>'; | |
| } | |
| function getMainTabIcon(tabName) { | |
| if (!tabName) return '<i class="lucide lucide-file-question"></i>'; | |
| const lowerTab = tabName.toLowerCase(); | |
| if (lowerTab.includes('discovery')) return '<i class="lucide lucide-search"></i>'; | |
| if (lowerTab.includes('preclinical')) return '<i class="lucide lucide-flask-conical"></i>'; | |
| if (lowerTab === 'clinical development') return '<i class="lucide lucide-users"></i>'; | |
| if (lowerTab === 'regulatory submission') return '<i class="lucide lucide-file-check-2"></i>'; | |
| if (lowerTab === 'post-marketing & quality') return '<i class="lucide lucide-recycle"></i>'; | |
| if (lowerTab.includes('flows')) return '<i class="lucide lucide-git-fork"></i>'; | |
| if (lowerTab.includes('all')) return '<i class="lucide lucide-layers"></i>'; | |
| return '<i class="lucide lucide-folder-open"></i>'; | |
| } | |
| function linkDocumentIDsForDetails(text) { | |
| if (!text || documentsData.length === 0) return 'N/A'; | |
| const knownIDs = new Set(documentsData.map(doc => doc.Doc_ID_Type)); | |
| let linkedText = text.replace(/(\b[A-Z0-9]+(?:-[A-Z0-9]+)*\b)/g, (match) => { | |
| if (knownIDs.has(match)) { | |
| return `<span class="doc-link" data-doc-id="${match}">${match}</span>`; | |
| } | |
| return match; | |
| }); | |
| return linkedText; | |
| } | |
| // --- Core Rendering & View Switching --- | |
| function switchToView(viewId, initialTab = null) { | |
| console.log(`Switching view to: ${viewId}, Initial Tab: ${initialTab}`); | |
| currentVisibleView = viewId; | |
| // Hide all main sections | |
| homeSection.classList.add('hidden-container'); | |
| documentViewWrapper.classList.add('hidden-container'); | |
| flowsViewWrapper.classList.add('hidden-container'); | |
| // Show the target section | |
| const targetSection = document.getElementById(viewId); | |
| if (targetSection) { | |
| targetSection.classList.remove('hidden-container'); | |
| // Handle specific view initializations | |
| if (viewId === 'documentViewWrapper') { | |
| currentDocViewTab = initialTab || 'All'; | |
| renderDocumentViewTabs(); | |
| renderDocumentList(); | |
| } else if (viewId === 'flowsViewWrapper') { | |
| renderFlowsList(); | |
| mermaidFlowGraphContainer.innerHTML = ''; | |
| flowPlaceholder.style.display = 'block'; | |
| currentSelectedFlowId = null; | |
| } else { | |
| currentDocViewTab = 'All'; | |
| } | |
| } else { | |
| console.error(`Target view section not found: ${viewId}. Defaulting to home.`); | |
| homeSection.classList.remove('hidden-container'); | |
| currentVisibleView = 'home'; | |
| } | |
| updateBreadcrumb(); | |
| clearSelection(); | |
| } | |
| function updateBreadcrumb() { | |
| breadcrumbNav.innerHTML = ''; | |
| const homeLink = `<a href="#" data-view-target="home" class="text-blue-600 hover:underline">Home</a>`; | |
| if (currentVisibleView === 'home') { | |
| breadcrumbNav.innerHTML = `<span class="text-gray-500">Home</span>`; | |
| } else if (currentVisibleView === 'documentViewWrapper') { | |
| breadcrumbNav.innerHTML = `${homeLink} <span class="mx-2 text-gray-400">/</span> <span class="text-gray-500">Document Catalog (${currentDocViewTab})</span>`; | |
| } else if (currentVisibleView === 'flowsViewWrapper') { | |
| breadcrumbNav.innerHTML = `${homeLink} <span class="mx-2 text-gray-400">/</span> <span class="text-gray-500">Process Visualization</span>`; | |
| } | |
| } | |
| function renderDocumentViewTabs() { | |
| const phaseMap = { | |
| 'Discovery': 'Discovery', 'Preclinical': 'Preclinical', | |
| 'Clinical Phase 1': 'Clinical Development', 'Clinical Phase 2': 'Clinical Development', 'Clinical Phase 3': 'Clinical Development', 'Clinical (All Phases)': 'Clinical Development', | |
| 'Regulatory Submission': 'Regulatory Submission', 'Regulatory Submission Review Phase': 'Regulatory Submission', | |
| 'Post-Marketing': 'Post-Marketing & Quality', 'All Phases': 'Post-Marketing & Quality', | |
| 'Discovery, Preclinical': 'Discovery', 'Preclinical, Clinical': 'Preclinical', | |
| 'Preclinical (End), Clinical Phase 1': 'Preclinical', 'Discovery (late), Preclinical, Clinical': 'Discovery', | |
| 'Pre/Post-Approval':'Regulatory Submission', 'Clinical (Annual)': 'Clinical Development', | |
| 'Preclinical / Clinical':'Preclinical', 'Clinical (Early Phase 2/End of Phase 2)': 'Clinical Development' | |
| }; | |
| const uniquePhases = [...new Set(documentsData.map(doc => phaseMap[doc.Phase] || 'Other'))]; | |
| const tabOrder = ['All', 'Discovery', 'Preclinical', 'Clinical Development', 'Regulatory Submission', 'Post-Marketing & Quality', 'Other']; | |
| const sortedTabs = tabOrder.filter(tab => uniquePhases.includes(tab) || tab === 'All'); | |
| uniquePhases.forEach(phase => { if (!sortedTabs.includes(phase)) sortedTabs.push(phase); }); | |
| let tabsHtml = ''; | |
| sortedTabs.forEach(tabName => { | |
| const isActive = tabName === currentDocViewTab; | |
| tabsHtml += ` | |
| <button | |
| data-tab-name="${tabName}" | |
| class="main-tab doc-view-tab px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 focus:outline-none whitespace-nowrap ${isActive ? 'active' : ''}" | |
| > | |
| ${getMainTabIcon(tabName)} ${tabName} | |
| </button> | |
| `; | |
| }); | |
| mainTabsDocViewContainer.innerHTML = tabsHtml; | |
| // Add event listeners to THESE tabs | |
| mainTabsDocViewContainer.querySelectorAll('.doc-view-tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| currentDocViewTab = tab.dataset.tabName; | |
| renderDocumentViewTabs(); | |
| renderDocumentList(); | |
| updateBreadcrumb(); | |
| clearSelection(); | |
| }); | |
| }); | |
| } | |
| function renderDocumentList() { | |
| if (currentVisibleView !== 'documentViewWrapper') return; | |
| const phaseMap = { | |
| 'Discovery': 'Discovery', 'Preclinical': 'Preclinical', | |
| 'Clinical Phase 1': 'Clinical Development', 'Clinical Phase 2': 'Clinical Development', 'Clinical Phase 3': 'Clinical Development', 'Clinical (All Phases)': 'Clinical Development', | |
| 'Regulatory Submission': 'Regulatory Submission', 'Regulatory Submission Review Phase': 'Regulatory Submission', | |
| 'Post-Marketing': 'Post-Marketing & Quality', 'All Phases': 'Post-Marketing & Quality', | |
| 'Discovery, Preclinical': 'Discovery', 'Preclinical, Clinical': 'Preclinical', | |
| 'Preclinical (End), Clinical Phase 1': 'Preclinical', 'Discovery (late), Preclinical, Clinical': 'Discovery', | |
| 'Pre/Post-Approval':'Regulatory Submission', 'Clinical (Annual)': 'Clinical Development', | |
| 'Preclinical / Clinical':'Preclinical', 'Clinical (Early Phase 2/End of Phase 2)': 'Clinical Development' | |
| }; | |
| const searchTerm = searchInputDocView.value.toLowerCase(); | |
| let filteredDocs = documentsData; | |
| // Apply phase filter based on currentDocViewTab | |
| if (currentDocViewTab !== 'All') { | |
| filteredDocs = filteredDocs.filter(doc => { | |
| const primaryPhase = phaseMap[doc.Phase] || 'Other'; | |
| return primaryPhase === currentDocViewTab; | |
| }); | |
| } | |
| // Apply search filter | |
| if (searchTerm) { | |
| filteredDocs = filteredDocs.filter(doc => | |
| doc.Document_Name.toLowerCase().includes(searchTerm) || | |
| doc.Doc_ID_Type.toLowerCase().includes(searchTerm) || | |
| (doc.Sub_Phase_Discipline && doc.Sub_Phase_Discipline.toLowerCase().includes(searchTerm)) || | |
| (doc.Purpose_Key_Content && doc.Purpose_Key_Content.toLowerCase().includes(searchTerm)) || | |
| (doc["Authoring_Department(s)"] && doc["Authoring_Department(s)"].toLowerCase().includes(searchTerm)) || | |
| (doc.Key_Metadata && doc.Key_Metadata.toLowerCase().includes(searchTerm)) | |
| ); | |
| } | |
| // Render logic with enhanced styling | |
| let listHtml = ''; | |
| if (filteredDocs.length === 0) { | |
| listHtml = `<p class="text-gray-500 text-center py-4">No documents found ${searchTerm ? 'matching search in' : 'for'} ${currentDocViewTab === 'All' ? 'any phase' : currentDocViewTab}.</p>`; | |
| } else { | |
| const sortedDocs = filteredDocs.sort((a, b) => a.Document_Name.localeCompare(b.Document_Name)); | |
| listHtml = '<ul class="divide-y divide-gray-200">'; | |
| sortedDocs.forEach(doc => { | |
| const isSelected = doc.Doc_ID_Type === currentSelectedDocId; | |
| listHtml += ` | |
| <li data-doc-id="${doc.Doc_ID_Type}" data-phase="${doc.Phase}" class="document-item doc-list-item px-3 py-3 hover:bg-blue-50 cursor-pointer text-sm flex justify-between items-start ${isSelected ? 'bg-blue-100 font-semibold' : ''}"> | |
| <div class="flex flex-col min-w-0 pr-2"> | |
| <div class="flex items-center"> | |
| <i class="lucide lucide-file-text text-blue-500 mr-2 flex-shrink-0"></i> | |
| <span class="font-medium truncate" title="${doc.Document_Name}">${doc.Document_Name}</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1 ml-6"> | |
| <span class="mr-2">${doc.Doc_ID_Type}</span> • | |
| <span class="mx-2">${doc.Phase || 'N/A'}</span> • | |
| <span class="mx-2">${doc.Sub_Phase_Discipline || 'N/A'}</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mt-1 ml-6 line-clamp-2" title="${doc.Purpose_Key_Content || 'No description available'}"> | |
| ${doc.Purpose_Key_Content || 'No description available'} | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-1 flex-shrink-0"> | |
| ${getComplexityIcon(doc.Complexity_Authoring)} | |
| ${getRegulatoryIcon(doc.Regulatory_Significance)} | |
| </div> | |
| </li>`; | |
| }); | |
| listHtml += '</ul>'; | |
| } | |
| if(documentListDocViewContainer) { | |
| documentListDocViewContainer.innerHTML = listHtml; | |
| } else { | |
| console.error("documentListDocViewContainer element not found!"); | |
| return; | |
| } | |
| // Add event listeners for items in THIS list | |
| document.querySelectorAll('#documentListDocView li.doc-list-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| currentSelectedDocId = item.dataset.docId; | |
| displayDetailsInModal(currentSelectedDocId); | |
| renderDocumentList(); | |
| }); | |
| }); | |
| } | |
| function findNextPrevDocs(currentId) { | |
| const listItems = documentListDocViewContainer.querySelectorAll('li[data-doc-id]'); | |
| const docIds = Array.from(listItems).map(li => li.dataset.docId); | |
| const currentIndex = docIds.indexOf(currentId); | |
| if (currentIndex === -1 || docIds.length <= 1) { | |
| return { prev: null, next: null }; | |
| } | |
| const prevIndex = currentIndex > 0 ? currentIndex - 1 : docIds.length - 1; | |
| const nextIndex = currentIndex < docIds.length - 1 ? currentIndex + 1 : 0; | |
| return { | |
| prev: docIds[prevIndex], | |
| next: docIds[nextIndex] | |
| }; | |
| } | |
| async function displayDetailsInModal(docId) { | |
| const doc = documentsData.find(d => d.Doc_ID_Type === docId); | |
| if (!doc) return; | |
| currentSelectedDocId = docId; | |
| detailsModalTitle.textContent = `${doc.Document_Name} (${doc.Doc_ID_Type})`; | |
| // Create tabs for different views | |
| const tabsHtml = ` | |
| <div class="details-tabs mb-4"> | |
| <div class="details-tab active" data-tab="info">Information</div> | |
| <div class="details-tab" data-tab="dependencies">Dependencies</div> | |
| </div> | |
| `; | |
| // Create content sections | |
| const infoHtml = ` | |
| <div class="details-content active" id="tab-content-info"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <div class="mb-3"> | |
| <span class="text-sm font-medium text-gray-600">Phase:</span> | |
| <span class="ml-2 text-sm px-2 py-1 bg-blue-100 text-blue-800 rounded-full">${doc.Phase || 'N/A'}</span> | |
| </div> | |
| <div class="mb-3"> | |
| <span class="text-sm font-medium text-gray-600">Discipline:</span> | |
| <span class="ml-2">${doc.Sub_Phase_Discipline || 'N/A'}</span> | |
| </div> | |
| <div class="mb-3"> | |
| <span class="text-sm font-medium text-gray-600">Authoring Department(s):</span> | |
| <span class="ml-2">${doc['Authoring_Department(s)'] || 'N/A'}</span> | |
| </div> | |
| <div class="mb-3"> | |
| <span class="text-sm font-medium text-gray-600">Review/Approval Dept(s):</span> | |
| <span class="ml-2">${doc['Review_Approval_Dept(s)'] || 'N/A'}</span> | |
| </div> | |
| <div class="mb-3 flex items-center"> | |
| <span class="text-sm font-medium text-gray-600">Complexity:</span> | |
| <span class="ml-2 flex items-center">${getComplexityIcon(doc.Complexity_Authoring)} ${doc.Complexity_Authoring || 'N/A'}</span> | |
| </div> | |
| <div class="mb-3 flex items-center"> | |
| <span class="text-sm font-medium text-gray-600">Regulatory Significance:</span> | |
| <span class="ml-2 flex items-center">${getRegulatoryIcon(doc.Regulatory_Significance)} ${doc.Regulatory_Significance || 'N/A'}</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="mb-3"> | |
| <div class="text-sm font-medium text-gray-600 mb-1">Purpose / Key Content:</div> | |
| <div class="bg-gray-50 p-3 rounded text-sm max-h-28 overflow-y-auto custom-scroll">${doc.Purpose_Key_Content || 'N/A'}</div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-sm font-medium text-gray-600 mb-1">Key Metadata:</div> | |
| <div class="bg-gray-50 p-3 rounded text-sm">${doc.Key_Metadata || 'N/A'}</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-sm font-medium text-gray-600 mb-1">Input Docs/Data:</div> | |
| <div class="bg-gray-50 p-3 rounded text-sm">${linkDocumentIDsForDetails(doc.Input_Documents_Data_Sources) || 'N/A'}</div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-sm font-medium text-gray-600 mb-1">Output/Informs Docs:</div> | |
| <div class="bg-gray-50 p-3 rounded text-sm">${linkDocumentIDsForDetails(doc.Output_Informs_Documents) || 'N/A'}</div> | |
| </div> | |
| </div> | |
| `; | |
| const dependenciesHtml = ` | |
| <div class="details-content" id="tab-content-dependencies"> | |
| <div id="document-graph-container" class="dependency-graph mt-3"></div> | |
| </div> | |
| `; | |
| // Combine all content | |
| detailsContentInModal.innerHTML = tabsHtml + infoHtml + dependenciesHtml; | |
| // Add tab switching functionality | |
| detailsContentInModal.querySelectorAll('.details-tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Update active tab | |
| detailsContentInModal.querySelectorAll('.details-tab').forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| // Show corresponding content | |
| const tabId = tab.dataset.tab; | |
| detailsContentInModal.querySelectorAll('.details-content').forEach(c => c.classList.remove('active')); | |
| document.getElementById(`tab-content-${tabId}`).classList.add('active'); | |
| // If dependencies tab, render the graph | |
| if (tabId === 'dependencies') { | |
| renderDependencyGraph(docId); | |
| } | |
| }); | |
| }); | |
| // Add event listeners to document links within the modal | |
| detailsContentInModal.querySelectorAll('.doc-link').forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| displayDetailsInModal(e.target.dataset.docId); | |
| // Optionally update the main list highlight if visible | |
| if (currentVisibleView === 'documentViewWrapper') { | |
| renderDocumentList(); | |
| } | |
| }); | |
| }); | |
| // Setup Next/Prev Buttons | |
| currentDocListIndices = findNextPrevDocs(docId); | |
| prevDocBtn.disabled = !currentDocListIndices.prev; | |
| nextDocBtn.disabled = !currentDocListIndices.next; | |
| // Show Modal | |
| detailsModal.style.display = 'flex'; | |
| // Only re-render list if doc view is active | |
| if (currentVisibleView === 'documentViewWrapper') { | |
| renderDocumentList(); | |
| } | |
| } | |
| // New function to render dependency graph using Mermaid | |
| async function renderDependencyGraph(docId) { | |
| const doc = documentsData.find(d => d.Doc_ID_Type === docId); | |
| if (!doc) return; | |
| const container = document.getElementById('document-graph-container'); | |
| if (!container) return; | |
| // Show loading spinner | |
| container.innerHTML = '<div class="loading-spinner"></div>'; | |
| const inputIDs = extractDocIDs(doc.Input_Documents_Data_Sources); | |
| const outputIDs = extractDocIDs(doc.Output_Informs_Documents); | |
| let mermaidDefinition = 'graph TD;\n'; | |
| const centerNodeName = getDocNameById(doc.Doc_ID_Type); | |
| // Define center node with improved styling | |
| mermaidDefinition += ` ${doc.Doc_ID_Type}("${centerNodeName}\\n(${doc.Doc_ID_Type})"):::focus;\n`; | |
| // Define input nodes and connections | |
| inputIDs.forEach(inputId => { | |
| const inputNodeName = getDocNameById(inputId); | |
| mermaidDefinition += ` ${inputId}("${inputNodeName}\\n(${inputId})"):::input --> ${doc.Doc_ID_Type};\n`; | |
| }); | |
| // Define output nodes and connections | |
| outputIDs.forEach(outputId => { | |
| const outputNodeName = getDocNameById(outputId); | |
| mermaidDefinition += ` ${doc.Doc_ID_Type} --> ${outputId}("${outputNodeName}\\n(${outputId})"):::output;\n`; | |
| }); | |
| // Add class definitions for better styling | |
| mermaidDefinition += ` classDef focus fill:#e0f2fe,stroke:#38bdf8,stroke-width:2px,color:#075985;\n`; | |
| mermaidDefinition += ` classDef input fill:#f1f5f9,stroke:#94a3b8,color:#334155;\n`; | |
| mermaidDefinition += ` classDef output fill:#f1f5f9,stroke:#94a3b8,color:#334155;\n`; | |
| // Add click handlers for all nodes | |
| [doc.Doc_ID_Type, ...inputIDs, ...outputIDs].forEach(id => { | |
| mermaidDefinition += ` click ${id} call displayDetailsAndGraphFromModal("${id}") "View Details";\n`; | |
| }); | |
| try { | |
| const graphId = `mermaid-modal-graph-${docId}-${Date.now()}`; | |
| const { svg } = await mermaid.render(graphId, mermaidDefinition); | |
| container.innerHTML = svg; | |
| // Make the SVG responsive | |
| const svgElement = container.querySelector('svg'); | |
| if (svgElement) { | |
| svgElement.setAttribute('width', '100%'); | |
| svgElement.setAttribute('height', '100%'); | |
| svgElement.style.maxHeight = '400px'; | |
| } | |
| } catch (error) { | |
| console.error("Mermaid rendering error:", error); | |
| container.innerHTML = ` | |
| <div class="text-center text-red-500 py-4"> | |
| <i class="lucide lucide-alert-triangle text-2xl mb-2"></i> | |
| <p>Failed to render dependency graph.</p> | |
| </div> | |
| `; | |
| } | |
| } | |
| // Callbacks from Mermaid graphs | |
| window.displayDetailsAndGraphFromGraph = async (docId) => { | |
| console.log("Graph node clicked (main flow or example):", docId); | |
| await displayDetailsInModal(docId); | |
| setTimeout(() => { | |
| // If the doc list view is active, scroll the item into view | |
| if (currentVisibleView === 'documentViewWrapper') { | |
| const listItem = document.querySelector(`#documentListDocView li[data-doc-id="${docId}"]`); | |
| listItem?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | |
| } | |
| }, 100); | |
| }; | |
| window.displayDetailsAndGraphFromModal = async (docId) => { | |
| console.log("Modal graph node clicked:", docId); | |
| await displayDetailsInModal(docId); | |
| setTimeout(() => { | |
| if (currentVisibleView === 'documentViewWrapper') { | |
| const listItem = document.querySelector(`#documentListDocView li[data-doc-id="${docId}"]`); | |
| listItem?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | |
| } | |
| }, 100); | |
| }; | |
| function clearSelection() { | |
| currentSelectedDocId = null; | |
| if (currentVisibleView === 'documentViewWrapper') { | |
| renderDocumentList(); | |
| } | |
| } | |
| // Enhance flow list rendering with better UI | |
| function renderFlowsList() { | |
| const flowDisplayTitles = { | |
| "p1_sad": "Phase 1 SAD Study Documents", | |
| "nda_submission": "NDA/MAA Submission Process", | |
| "ind_pathway": "IND Pathway Documents", | |
| "clinical_program": "Clinical Program Development" | |
| }; | |
| let flowsHtml = ` | |
| <div class="mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Document Workflows</h3> | |
| <p class="text-sm text-gray-500 mb-4">Select a flow to visualize document relationships and dependencies in typical R&D processes.</p> | |
| </div> | |
| `; | |
| Object.keys(flowDefinitions).forEach(id => { | |
| const title = flowDisplayTitles[id] || `Flow ${id}`; | |
| const isSelected = id === currentSelectedFlowId; | |
| flowsHtml += ` | |
| <div class="flow-card ${isSelected ? 'active' : ''}" data-flow-id="${id}"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="lucide lucide-git-branch text-purple-500 mr-2"></i> | |
| <span class="font-medium">${title}</span> | |
| </div> | |
| <i class="lucide lucide-chevron-right text-gray-400"></i> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1 ml-6"> | |
| ${id === 'p1_sad' ? 'Documents required for First-in-Human studies' : | |
| id === 'nda_submission' ? 'Regulatory submission package assembly' : | |
| id === 'ind_pathway' ? 'Discovery to IND enabling documents' : | |
| id === 'clinical_program' ? 'Clinical phase documentation flow' : | |
| 'Document workflow visualization'} | |
| </p> | |
| </div> | |
| `; | |
| }); | |
| flowsListContainer.innerHTML = flowsHtml; | |
| // Add event listeners | |
| flowsListContainer.querySelectorAll('.flow-card').forEach(card => { | |
| card.addEventListener('click', () => { | |
| const flowId = card.dataset.flowId; | |
| currentSelectedFlowId = flowId; | |
| displayFlowGraph(flowId); | |
| renderFlowsList(); // Update active state | |
| }); | |
| }); | |
| } | |
| // Enhanced flow graph display | |
| async function displayFlowGraph(flowId) { | |
| const definition = flowDefinitions[flowId]; | |
| if (!definition) { | |
| mermaidFlowGraphContainer.innerHTML = ` | |
| <div class="flex flex-col items-center justify-center p-10 text-gray-500"> | |
| <i class="lucide lucide-alert-circle text-3xl mb-3"></i> | |
| <p>Flow definition not found.</p> | |
| </div> | |
| `; | |
| flowPlaceholder.style.display = 'none'; | |
| return; | |
| } | |
| // Show loading indicator | |
| mermaidFlowGraphContainer.innerHTML = ` | |
| <div class="flex flex-col items-center justify-center p-10"> | |
| <div class="loading-spinner"></div> | |
| <p class="text-gray-500 mt-4">Rendering flow graph...</p> | |
| </div> | |
| `; | |
| flowPlaceholder.style.display = 'none'; | |
| try { | |
| if (flowsViewWrapper.classList.contains('hidden-container')) return; | |
| const clickableDefinition = definition.replace(/click ([A-Z0-9_\-]+) call displayDetailsAndGraphFromGraph/g,'click $1 call displayDetailsAndGraphFromGraph'); | |
| const graphId = `mermaid-flow-${flowId}-${Date.now()}`; | |
| const { svg } = await mermaid.render(graphId, clickableDefinition); | |
| mermaidFlowGraphContainer.innerHTML = svg; | |
| // Make the SVG responsive | |
| const svgElement = mermaidFlowGraphContainer.querySelector('svg'); | |
| if (svgElement) { | |
| svgElement.setAttribute('width', '100%'); | |
| svgElement.setAttribute('height', '100%'); | |
| svgElement.style.maxHeight = '700px'; // Taller to accommodate complex flows | |
| } | |
| // Add title and description based on flow ID | |
| const flowDisplayTitles = { | |
| "p1_sad": "Phase 1 SAD Study Documents", | |
| "nda_submission": "NDA/MAA Submission Process", | |
| "ind_pathway": "IND Pathway Documents", | |
| "clinical_program": "Clinical Program Development" | |
| }; | |
| const flowDescriptions = { | |
| "p1_sad": "This diagram shows the key documents needed for a Phase 1 Single Ascending Dose study, from preclinical inputs through to clinical execution and reporting.", | |
| "nda_submission": "The NDA/MAA submission process flow showing how various documents and data packages are assembled into a regulatory submission.", | |
| "ind_pathway": "Documents required from Discovery through Preclinical development to enable an IND/CTA submission.", | |
| "clinical_program": "The integrated flow of clinical documentation across Phases 1-3 leading to regulatory submission." | |
| }; | |
| const title = flowDisplayTitles[flowId] || `Flow ${flowId}`; | |
| const description = flowDescriptions[flowId] || "Document workflow visualization"; | |
| // Add title and description above the graph | |
| const titleContainer = document.createElement('div'); | |
| titleContainer.className = 'mb-4'; | |
| titleContainer.innerHTML = ` | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">${title}</h3> | |
| <p class="text-sm text-gray-600">${description}</p> | |
| `; | |
| mermaidFlowGraphContainer.insertBefore(titleContainer, mermaidFlowGraphContainer.firstChild); | |
| } catch (error) { | |
| console.error(`Mermaid rendering error for flow ${flowId}:`, error); | |
| mermaidFlowGraphContainer.innerHTML = ` | |
| <div class="text-center p-10"> | |
| <i class="lucide lucide-alert-triangle text-red-500 text-3xl mb-3"></i> | |
| <p class="text-red-500 mb-4">Error rendering flow graph.</p> | |
| <div class="bg-gray-100 p-4 rounded text-xs overflow-auto max-h-60"> | |
| ${error.message} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| async function showExampleFlow() { | |
| const exampleDefinition = flowDefinitions['p1_sad']; | |
| try { | |
| // Show loading indicator | |
| exampleMermaidGraphContainer.innerHTML = ` | |
| <div class="flex flex-col items-center justify-center p-10"> | |
| <div class="loading-spinner"></div> | |
| <p class="text-gray-500 mt-4">Rendering example flow...</p> | |
| </div> | |
| `; | |
| const clickableDefinition = exampleDefinition.replace(/click ([A-Z0-9_\-]+) call displayDetailsAndGraphFromGraph/g, 'click $1 call displayDetailsAndGraphFromModal'); | |
| const graphId = `example-mermaid-graph-render-${Date.now()}`; | |
| const { svg } = await mermaid.render(graphId, clickableDefinition); | |
| exampleMermaidGraphContainer.innerHTML = svg; | |
| // Add title and description | |
| const titleContainer = document.createElement('div'); | |
| titleContainer.className = 'mb-4'; | |
| titleContainer.innerHTML = ` | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Phase 1 SAD Study Documents</h3> | |
| <p class="text-sm text-gray-600">This diagram shows the key documents needed for a Phase 1 Single Ascending Dose study, from preclinical inputs through to clinical execution and reporting.</p> | |
| `; | |
| exampleMermaidGraphContainer.insertBefore(titleContainer, exampleMermaidGraphContainer.firstChild); | |
| // Make the SVG responsive | |
| const svgElement = exampleMermaidGraphContainer.querySelector('svg'); | |
| if (svgElement) { | |
| svgElement.setAttribute('width', '100%'); | |
| svgElement.setAttribute('height', '100%'); | |
| } | |
| exampleFlowModal.style.display = "flex"; | |
| } catch (error) { | |
| console.error("Mermaid rendering error for example:", error); | |
| exampleMermaidGraphContainer.innerHTML = ` | |
| <div class="text-center p-10"> | |
| <i class="lucide lucide-alert-triangle text-red-500 text-3xl mb-3"></i> | |
| <p class="text-red-500">Error rendering example flow graph.</p> | |
| </div> | |
| `; | |
| exampleFlowModal.style.display = "flex"; | |
| } | |
| } | |
| // --- Global Search Functionality --- | |
| function performGlobalSearch(searchTerm) { | |
| if (!searchTerm) return; | |
| searchTerm = searchTerm.toLowerCase(); | |
| let results = documentsData.filter(doc => | |
| doc.Document_Name.toLowerCase().includes(searchTerm) || | |
| doc.Doc_ID_Type.toLowerCase().includes(searchTerm) || | |
| (doc.Purpose_Key_Content && doc.Purpose_Key_Content.toLowerCase().includes(searchTerm)) | |
| ); | |
| // Switch to document view with search results | |
| switchToView('documentViewWrapper', 'All'); | |
| // Set the search input in document view to match the global search | |
| searchInputDocView.value = searchTerm; | |
| // Render the filtered list | |
| renderDocumentList(); | |
| } | |
| // --- Event Listeners --- | |
| // Search input specific to document view | |
| searchInputDocView?.addEventListener('input', renderDocumentList); | |
| // Global header search | |
| headerSearchInput?.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| performGlobalSearch(e.target.value); | |
| } | |
| }); | |
| // Home button listener | |
| homeButton?.addEventListener('click', () => switchToView('home')); | |
| // Breadcrumb listener (delegated) | |
| breadcrumbNav?.addEventListener('click', (e) => { | |
| if (e.target.tagName === 'A' && e.target.dataset.viewTarget) { | |
| e.preventDefault(); | |
| switchToView(e.target.dataset.viewTarget); | |
| } | |
| }); | |
| // Dashboard card listeners (delegated to main content area) | |
| mainContentArea?.addEventListener('click', (e) => { | |
| const card = e.target.closest('.dashboard-card[data-target-view]'); | |
| if (card) { | |
| const targetView = card.dataset.targetView; | |
| const initialTab = card.dataset.initialTab; // Get initial tab if specified | |
| if (targetView) { | |
| switchToView(targetView, initialTab); | |
| } | |
| } | |
| }); | |
| // Example Flow Buttons (Header and Flow View) | |
| showExampleFlowBtnHeader?.addEventListener('click', showExampleFlow); | |
| showExampleFlowBtnFlowView?.addEventListener('click', showExampleFlow); | |
| // Modal Close Listeners | |
| closeExampleModalBtn?.addEventListener('click', () => exampleFlowModal.style.display = "none"); | |
| window.addEventListener('click', (event) => { if (event.target == exampleFlowModal) exampleFlowModal.style.display = "none"; }); | |
| closeDetailsModalBtn?.addEventListener('click', () => { detailsModal.style.display = "none"; clearSelection(); }); | |
| window.addEventListener('click', (event) => { if (event.target == detailsModal) { detailsModal.style.display = "none"; clearSelection(); } }); | |
| // Modal Next/Prev Button Listeners | |
| prevDocBtn?.addEventListener('click', () => { if (currentDocListIndices.prev) displayDetailsInModal(currentDocListIndices.prev); }); | |
| nextDocBtn?.addEventListener('click', () => { if (currentDocListIndices.next) displayDetailsInModal(currentDocListIndices.next); }); | |
| // --- Initialization --- | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| console.log("DOM Loaded. Fetching data..."); | |
| try { | |
| // Load document data | |
| const docsResponse = await fetch('documents.json'); | |
| if (!docsResponse.ok) { | |
| throw new Error(`HTTP error! status: ${docsResponse.status}`); | |
| } | |
| documentsData = await docsResponse.json(); | |
| console.log(`Successfully loaded ${documentsData.length} documents from documents.json`); | |
| // Try to load template data if available | |
| try { | |
| const templatesResponse = await fetch('document_templates.json'); | |
| if (templatesResponse.ok) { | |
| templateData = await templatesResponse.json(); | |
| console.log(`Successfully loaded ${templateData.length} templates from document_templates.json`); | |
| } else { | |
| console.warn("Templates file not found. Document templates will not be available."); | |
| templateData = []; | |
| } | |
| } catch (templateError) { | |
| console.warn("Error loading templates:", templateError); | |
| templateData = []; | |
| } | |
| // Hide the loading spinner | |
| loadingSpinner.style.display = 'none'; | |
| // Start on the 'Home' view | |
| switchToView('home'); | |
| } catch (error) { | |
| console.error("Failed to load documents.json:", error); | |
| // Hide spinner and show error message | |
| loadingSpinner.style.display = 'none'; | |
| // Display error message more prominently | |
| mainContentArea.innerHTML = ` | |
| <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative m-4" role="alert"> | |
| <strong class="font-bold">Error!</strong> | |
| <span class="block sm:inline">Could not load document database (documents.json). Please ensure the file exists in the same folder and is valid JSON.</span> | |
| <p class="text-xs mt-1">(${error.message})</p> | |
| </div> | |
| `; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |