diff --git a/public/architecture.html b/public/architecture.html index c021c345..7bd0736f 100644 --- a/public/architecture.html +++ b/public/architecture.html @@ -335,15 +335,153 @@
- - - Tractatus Architecture Diagram - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + B + BoundaryEnforcer - Click for details + + + + + + I + InstructionPersistenceClassifier - Click for details + + + + + + V + CrossReferenceValidator - Click for details + + + + + + P + ContextPressureMonitor - Click for details + + + + + + M + MetacognitiveVerifier - Click for details + + + + + + D + PluralisticDeliberationOrchestrator - Click for details + + + + + + + + T + Tractatus + Tractatus Core - Click to see how all services work together + + + +
@@ -517,7 +655,7 @@ - + @@ -527,7 +665,7 @@ - + diff --git a/public/js/components/interactive-diagram.js b/public/js/components/interactive-diagram.js index 13b13409..93bb3cb6 100644 --- a/public/js/components/interactive-diagram.js +++ b/public/js/components/interactive-diagram.js @@ -196,55 +196,24 @@ class InteractiveDiagram { } setup() { - // SVG is loaded via tag, need to access its contentDocument - const objectElement = document.getElementById('interactive-svg-object'); - if (!objectElement) { - console.warn('[InteractiveDiagram] SVG object element not found'); + // SVG is now inline in the HTML + const svg = document.getElementById('interactive-arch-diagram'); + + if (!svg) { + console.warn('[InteractiveDiagram] Inline SVG not found'); return; } - // Wait for object to load with retry mechanism - const initializeSVG = () => { - const svgDoc = objectElement.contentDocument; - if (!svgDoc) { - console.warn('[InteractiveDiagram] Could not access SVG contentDocument, retrying...'); - setTimeout(initializeSVG, 100); - return; - } + console.log('[InteractiveDiagram] Found inline SVG'); + this.svg = svg; - // The SVG is the document element itself, or we can query for it - let svg = svgDoc.getElementById('interactive-arch-diagram'); - if (!svg) { - // Try getting the root SVG element - svg = svgDoc.documentElement; - console.log('[InteractiveDiagram] Using documentElement as SVG'); - } + const nodes = svg.querySelectorAll('.service-node'); + console.log(`[InteractiveDiagram] Found ${nodes.length} service nodes`); - if (!svg) { - console.warn('[InteractiveDiagram] SVG diagram not found in contentDocument'); - return; - } - - // Verify it's actually an SVG element (case-insensitive check) - const tagName = svg.tagName ? svg.tagName.toLowerCase() : ''; - if (tagName !== 'svg') { - console.warn('[InteractiveDiagram] Element found but not SVG, tagName:', tagName, '- retrying...'); - // This is the race condition - contentDocument is HTML, not SVG yet - setTimeout(initializeSVG, 100); - return; - } - - // Store reference to SVG document for later use - this.svgDoc = svgDoc; - this.svg = svg; - - const nodes = svg.querySelectorAll('.service-node'); - console.log(`[InteractiveDiagram] Found ${nodes.length} service nodes`); - - if (nodes.length === 0) { - console.warn('[InteractiveDiagram] No service nodes found in SVG'); - return; - } + if (nodes.length === 0) { + console.warn('[InteractiveDiagram] No service nodes found in SVG'); + return; + } nodes.forEach(node => { const serviceId = node.getAttribute('data-service'); @@ -281,61 +250,8 @@ class InteractiveDiagram { // Show initial state (overview) this.showServiceDetails('overview'); console.log('[InteractiveDiagram] Setup complete, showing overview'); - }; - - // FIXED: Better load detection with SVG verification - const checkAndInit = () => { - const svgDoc = objectElement.contentDocument; - - // Check if contentDocument exists and is actually SVG - if (svgDoc && svgDoc.documentElement) { - const rootTagName = svgDoc.documentElement.tagName ? svgDoc.documentElement.tagName.toLowerCase() : ''; - - if (rootTagName === 'svg') { - // It's an SVG - safe to initialize - console.log('[InteractiveDiagram] SVG detected in contentDocument, initializing'); - initializeSVG(); - return true; - } else { - console.log('[InteractiveDiagram] contentDocument exists but root is:', rootTagName, '- not ready yet'); - return false; - } - } - return false; - }; - - // Try immediate initialization if already loaded - if (!checkAndInit()) { - // Not ready yet - wait for load event - console.log('[InteractiveDiagram] Waiting for object to load...'); - - objectElement.addEventListener('load', () => { - console.log('[InteractiveDiagram] Object load event fired'); - // Small delay to ensure contentDocument is fully parsed - setTimeout(() => { - if (!checkAndInit()) { - // Still not ready - start retry mechanism - initializeSVG(); - } - }, 50); - }); - - // Also try periodic checks as fallback - let retryCount = 0; - const maxRetries = 20; - const retryInterval = setInterval(() => { - retryCount++; - if (checkAndInit() || retryCount >= maxRetries) { - clearInterval(retryInterval); - if (retryCount >= maxRetries) { - console.error('[InteractiveDiagram] Failed to load SVG after', maxRetries, 'retries'); - } - } - }, 100); - } } - highlightService(serviceId) { if (!this.svg) return; diff --git a/public/js/i18n-simple.js b/public/js/i18n-simple.js index 721d0221..ceb444f5 100644 --- a/public/js/i18n-simple.js +++ b/public/js/i18n-simple.js @@ -115,6 +115,8 @@ const I18n = { // Deep merge common and page-specific translations (page-specific takes precedence) // Uses deep merge to preserve nested objects like footer in common.json this.translations = this.deepMerge(commonTranslations, pageTranslations); + // Expose translations globally for components like interactive-diagram + window.i18nTranslations = this.translations; console.log(`[i18n] Loaded translations: common + ${pageName}`); console.log(`[i18n] Footer translations present:`, !!this.translations.footer); console.log(`[i18n] Footer.about_heading:`, this.translations.footer?.about_heading);