Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 | /**
* @module Analytics/CommitteeIntelligence/Init
* @description Dashboard initialization, DOM event listeners, and error handling
* for the Committee Intelligence Dashboard.
*
* Contains:
* - **initializeDashboard**: Main async init function that fetches data and renders all charts
* - UI helpers: showLoadingIndicator, hideLoadingIndicator, showErrorMessage
* - Event listeners for tab switching and responsive resize handling
*
* @author Hack23 AB
* @license Apache-2.0
*/
declare const d3: any;
declare const Chart: any;
declare const Papa: any;
import type { CommitteeData } from './types.js';
import { CONFIG, DataManager } from './data.js';
import { NetworkDiagram, ProductivityHeatMap } from './charts.js';
import { ChartJSVisualizations } from './table.js';
// ==============================================
// INITIALIZATION
// ==============================================
interface VisualizationInstances {
network: NetworkDiagram;
heatmap: ProductivityHeatMap;
charts: ChartJSVisualizations;
}
// Keep references to visualization instances for reuse
let visualizationInstances: VisualizationInstances | null = null;
// Module-level flag to prevent concurrent initializations
let isInitializing: boolean = false;
/**
* Initialize committee dashboard
*/
async function initializeDashboard(): Promise<void> {
// Early guard: only initialize when the main dashboard container exists
const dashboardRoot: HTMLElement | null = document.getElementById('committee-dashboard');
if (!dashboardRoot) {
console.info('[CommitteeDashboard] Skipping initialization: #committee-dashboard container not found.');
return;
}
// Prevent concurrent initializations (race condition on resize)
if (isInitializing) {
console.info('[CommitteeDashboard] Already initializing, skipping duplicate call');
return;
}
isInitializing = true;
console.log('[CommitteeDashboard] Initializing...');
try {
// Check if required libraries are loaded
if (typeof d3 === 'undefined') {
throw new Error('D3.js not loaded. Please include D3.js library.');
}
if (typeof Chart === 'undefined') {
throw new Error('Chart.js not loaded. Please include Chart.js library.');
}
if (typeof Papa === 'undefined') {
throw new Error('Papa Parse not loaded. Please include Papa Parse library.');
}
// Show loading indicator
showLoadingIndicator();
// Load data
const dataManager: DataManager = new DataManager();
const data: CommitteeData = await dataManager.loadAllData();
console.log('[CommitteeDashboard] Data loaded successfully', data);
// Destroy existing Chart.js instances if they exist
if (visualizationInstances && visualizationInstances.charts) {
visualizationInstances.charts.destroy();
}
// Render visualizations
const network: NetworkDiagram = new NetworkDiagram('committeeNetwork', data);
network.render();
const heatmap: ProductivityHeatMap = new ProductivityHeatMap('productivityMatrix', data);
heatmap.render();
const charts: ChartJSVisualizations = new ChartJSVisualizations();
charts.renderAll(data);
// Store instances for later cleanup/reuse
visualizationInstances = {
network: network,
heatmap: heatmap,
charts: charts
};
// Hide loading indicator
hideLoadingIndicator();
console.log('[CommitteeDashboard] Initialization complete');
} catch (error: unknown) {
console.error('[CommitteeDashboard] Initialization failed:', error);
showErrorMessage((error as Error).message);
} finally {
// Always clear the flag when initialization completes or fails
isInitializing = false;
}
}
/**
* Show loading indicator (idempotent - safe to call multiple times)
*/
function showLoadingIndicator(): void {
const dashboard: HTMLElement | null = document.getElementById('committee-dashboard');
if (!dashboard) return;
// Remove existing loading indicator if present (idempotency)
const existing: HTMLElement | null = document.getElementById('committee-loading');
if (existing) {
existing.remove();
}
const indicator: HTMLDivElement = document.createElement('div');
indicator.id = 'committee-loading';
indicator.className = 'loading-indicator';
indicator.setAttribute('role', 'status');
indicator.setAttribute('aria-live', 'polite');
const spinner: HTMLDivElement = document.createElement('div');
spinner.className = 'spinner';
indicator.appendChild(spinner);
const text: HTMLParagraphElement = document.createElement('p');
text.textContent = 'Loading committee data...';
indicator.appendChild(text);
dashboard.insertBefore(indicator, dashboard.firstChild);
}
/**
* Hide loading indicator
*/
function hideLoadingIndicator(): void {
const indicator: HTMLElement | null = document.getElementById('committee-loading');
if (indicator) {
indicator.remove();
}
}
/**
* Show error message
*/
function showErrorMessage(message: string): void {
const dashboard: HTMLElement | null = document.getElementById('committee-dashboard');
if (!dashboard) return;
const error: HTMLDivElement = document.createElement('div');
error.className = 'error-message';
error.setAttribute('role', 'alert');
const heading: HTMLHeadingElement = document.createElement('h3');
heading.textContent = '⚠️ Error Loading Committee Dashboard';
error.appendChild(heading);
const messageParagraph: HTMLParagraphElement = document.createElement('p');
messageParagraph.textContent = message;
error.appendChild(messageParagraph);
const supportParagraph: HTMLParagraphElement = document.createElement('p');
supportParagraph.textContent = 'Please refresh the page or contact support if the issue persists.';
error.appendChild(supportParagraph);
dashboard.insertBefore(error, dashboard.firstChild);
hideLoadingIndicator();
}
// ==============================================
// EVENT LISTENERS
// ==============================================
// Initialize on DOM ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeDashboard);
} else {
// DOM already loaded
initializeDashboard();
}
// Re-render on window resize (debounced)
let resizeTimeout: ReturnType<typeof setTimeout>;
window.addEventListener('resize', function(): void {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(): void {
console.log('[CommitteeDashboard] Window resized, re-rendering...');
initializeDashboard();
}, 300);
});
|