No documents found ${searchTerm ? 'matching search in' : 'for'} ${currentDocViewTab === 'All' ? 'any phase' : currentDocViewTab}.
`;
} else {
const sortedDocs = filteredDocs.sort((a, b) => a.Document_Name.localeCompare(b.Document_Name));
listHtml = '
`;
if (relatedSections.length > 0) {
sectionsHtml += `
`;
relatedSections.forEach(section => {
sectionsHtml += `
${section['Output Section Name']}
${section['Output Sub-section Name'] || ''}
Input: ${section['Input Document (s)'] || 'N/A'}
`;
});
sectionsHtml += `
`;
} else {
sectionsHtml += `
No section-level mapping data available for this document.
`;
}
sectionsHtml += `
Failed to render dependency graph.
`;
}
}
// --- Flow Visualization Functions ---
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 = `
Flow definition not found.
`;
flowPlaceholder.style.display = 'none';
return;
}
// Show loading indicator
mermaidFlowGraphContainer.innerHTML = `
Error rendering flow graph.
${error.message}
`;
}
}
async function showExampleFlow() {
const exampleDefinition = flowDefinitions['p1_sad'];
try {
// Show loading indicator
exampleMermaidGraphContainer.innerHTML = `
This diagram shows the key documents needed for a Phase 1 Single Ascending Dose study, from preclinical inputs through to clinical execution and reporting.
`;
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 = `
Error rendering example flow graph.
`;
exampleFlowModal.style.display = "flex";
}
}
// --- NEW: Data Lineage Functions ---
function renderDataLineageSelectors() {
if (!lineageDocumentSelect) return;
// Clear previous options
lineageDocumentSelect.innerHTML = '
No lineage data found for this section.
`;
return;
}
// Create Mermaid definition for section lineage
let mermaidDefinition = 'graph TD;\n';
// Create unique node IDs
const targetNodeId = `${sanitizeForMermaid(documentName)}_${sanitizeForMermaid(sectionName)}`;
// Create the target section node
mermaidDefinition += ` ${targetNodeId}["${documentName}\\n${sectionName}"]:::target;\n`;
// Add input documents/sections if available
if (targetSection['Input Document (s)']) {
const inputSources = targetSection['Input Document (s)'].split(',').map(s => s.trim());
inputSources.forEach((source, idx) => {
// Try to find if it's a specific section
const sourceSection = source.includes(':') ? source.split(':')[1].trim() : '';
const sourceDoc = source.includes(':') ? source.split(':')[0].trim() : source;
const sourceNodeId = `input_${sanitizeForMermaid(sourceDoc)}_${idx}`;
if (sourceSection) {
mermaidDefinition += ` ${sourceNodeId}["${sourceDoc}\\n${sourceSection}"]:::input --> ${targetNodeId};\n`;
} else {
mermaidDefinition += ` ${sourceNodeId}["${sourceDoc}"]:::input --> ${targetNodeId};\n`;
}
});
}
// Find sections that use this section as input
const outputSections = sectionMappingData.filter(section => {
if (!section['Input Document (s)']) return false;
// Check if any input source references this document and section
const inputSources = section['Input Document (s)'].split(',').map(s => s.trim());
return inputSources.some(source => {
// Check for exact section reference
if (source.includes(':')) {
const [sourceDoc, sourceSection] = source.split(':').map(s => s.trim());
return sourceDoc === documentName && sourceSection === sectionName;
}
// Check for document reference
return source === documentName;
});
});
// Add output sections to graph
outputSections.forEach((outputSection, idx) => {
const outputNodeId = `output_${sanitizeForMermaid(outputSection.Document_Name)}_${idx}`;
mermaidDefinition += ` ${targetNodeId} --> ${outputNodeId}["${outputSection.Document_Name}\\n${outputSection['Output Section Name']}"]:::output;\n`;
});
// Add styling
mermaidDefinition += `
classDef target fill:#e0f2fe,stroke:#38bdf8,stroke-width:2px,color:#075985;
classDef input fill:#f1f5f9,stroke:#94a3b8,color:#334155;
classDef output fill:#f0fdf4,stroke:#4ade80,color:#15803d;
`;
try {
const graphId = `mermaid-lineage-${Date.now()}`;
const { svg } = await mermaid.render(graphId, mermaidDefinition);
// Create title container
const titleContainer = document.createElement('div');
titleContainer.className = 'mb-4';
titleContainer.innerHTML = `
Error rendering section lineage graph.
${error.message}
`;
}
}
// Helper function to sanitize text for Mermaid node IDs
function sanitizeForMermaid(text) {
return text.replace(/[^a-zA-Z0-9]/g, '_');
}
// --- NEW: Uber Dependency View Functions ---
function renderUberDepFilters() {
if (!uberDepDocTypeSelect || !uberDepPhaseSelect) return;
// Clear previous options
uberDepDocTypeSelect.innerHTML = '
${selectedDocType !== 'all' ? `Document Type: ${selectedDocType}` : 'All Document Types'} |
${selectedPhase !== 'all' ? `Phase: ${selectedPhase}` : 'All Phases'}
Showing ${docIdsInGraph.size} documents and ${processedDeps.size} dependencies
${filteredDocs.length >= 30 ? ' (limited to 30 documents for readability)' : ''}
`;
// Clear container and add title + SVG
mermaidUberDepGraph.innerHTML = '';
mermaidUberDepGraph.appendChild(titleContainer);
mermaidUberDepGraph.innerHTML += svg;
// Make SVG responsive
const svgElement = mermaidUberDepGraph.querySelector('svg');
if (svgElement) {
svgElement.setAttribute('width', '100%');
svgElement.setAttribute('height', '100%');
svgElement.style.maxHeight = '800px';
}
} catch (error) {
console.error("Mermaid rendering error for uber dependency graph:", error);
mermaidUberDepGraph.innerHTML = `
Error rendering dependency graph.
${error.message}
`;
}
}
// Helper function to get Mermaid class for document phase
function getPhaseClassForNode(phase) {
if (!phase) return 'default';
const lowerPhase = phase.toLowerCase();
if (lowerPhase.includes('discovery')) return 'discovery';
if (lowerPhase.includes('preclinical')) return 'preclinical';
if (lowerPhase.includes('clinical')) return 'clinical';
if (lowerPhase.includes('regulatory') || lowerPhase.includes('submission')) return 'regulatory';
if (lowerPhase.includes('post-marketing') || lowerPhase.includes('post-approval')) return 'postmarketing';
return 'default';
}
// --- Callback Functions for Mermaid Graph Interactions ---
window.displayDetailsAndGraphFromGraph = async (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);
};
window.displayDetailsAndGraphFromModal = async (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);
};
window.displayDetailsFromUberGraph = async (docId) => {
await displayDetailsInModal(docId);
};
function clearSelection() {
currentSelectedDocId = null;
if (currentVisibleView === 'documentViewWrapper') {
renderDocumentList();
}
}
// --- 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 ---
document.addEventListener('DOMContentLoaded', function() {
// 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); });
// Load data and initialize application
initializeApp();
});
// --- Initialize Application and Load Data ---
async function initializeApp() {
try {
await Promise.all([
loadDocumentsData(),
loadSectionMappingData()
]);
// Hide loading spinner
loadingSpinner.style.display = 'none';
// Initialize the home view
switchToView('home');
} catch (error) {
console.error("Failed to initialize application:", error);
// Hide spinner and show error message
loadingSpinner.style.display = 'none';
// Display error message
mainContentArea.innerHTML = `