Implement multiple performance and UI improvements

Author: jameson-dev

index.html

@@ -5,7 +5,7 @@
   "start_url": "./",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#4a90e2",
+  "theme_color": "#2563eb",
   "orientation": "any",
   "scope": "./",
   "icons": [

manifest.json

@@ -35,7 +35,6 @@ const STATIC_ASSETS = [
     './src/js/utils.js',
     './src/js/performance.js',
     './src/js/pdf-generator.js',
-    './src/js/logger.js',
     './src/js/error-handler.js',
     './src/js/modals-content.js',
     './src/js/inline-handlers.js'

service-worker.js

@@ -38,7 +38,7 @@ export const MARKER_CONFIG = {
 
 // Severity colors
 export const SEVERITY_COLORS = {
-    '1: PDO': '#4a90e2',
+    '1: PDO': '#2563eb', // Updated to match theme color
     '2: MI': '#f39c12',
     '3: SI': '#e67e22',
     '4: Fatal': '#e74c3c'
@@ -60,15 +60,16 @@ export const HEAVY_VEHICLE_TYPES = [
 ];
 
 // Tutorial tabs
-export const TUTORIAL_TABS = ['getting-started', 'filtering', 'analytics', 'tools', 'tips'];
+export const TUTORIAL_TABS = ['getting-started', 'filtering', 'analytics', 'tools', 'tips', 'quick-ref'];
 
 // Tutorial tab content mapping
 export const TUTORIAL_TAB_CONTENT_MAP = {
     'getting-started': 'gettingStartedTab',
     'filtering': 'filteringTab',
     'analytics': 'analyticsTab',
     'tools': 'toolsTab',
-    'tips': 'tipsTab'
+    'tips': 'tipsTab',
+    'quick-ref': 'quickRefTab'
 };
 
 // Filter presets
@@ -258,7 +259,9 @@ export const MAP_CONFIG = {
 // Cache configuration
 export const CACHE_CONFIG = {
     MARKER_ICON_CACHE_SIZE: 1000,
-    POPUP_CACHE_SIZE: 2000
+    POPUP_CACHE_SIZE: 2000,
+    FILTER_CACHE_SIZE: 50,          // LRU cache size for filter results
+    FILTER_CACHE_MAX_AGE: 7 * 24 * 60 * 60 * 1000  // 7 days in milliseconds
 };
 
 // Loading configuration
@@ -268,8 +271,26 @@ export const LOADING_CONFIG = {
     URL_LOAD_DELAY: 2000
 };
 
+// Performance timeouts (milliseconds)
+export const TIMEOUTS = {
+    DEBOUNCE_DEFAULT: 300,
+    THROTTLE_DEFAULT: 300,
+    NOTIFICATION_DURATION: 5000,
+    NOTIFICATION_FADE: 10000,
+    CHART_RENDER_DELAY: 300,
+    IDLE_CHUNK_SIZE: 100
+};
+
 // Coordinate system configuration
 export const COORDINATE_SYSTEMS = {
     SOURCE: 'EPSG:3107', // GDA2020 / SA Lambert
     TARGET: 'EPSG:4326'  // WGS84
 };
+
+// South Australia coordinate boundaries for validation
+export const SA_BOUNDS = {
+    LAT_MIN: -39,
+    LAT_MAX: -25,
+    LNG_MIN: 128,
+    LNG_MAX: 142
+};

src/js/config.js

@@ -64,27 +64,16 @@ export function linkCrashData() {
 }
 
 /**
- * Load units data with caching
+ * Load units data with caching (standalone version for parallel loading)
  */
-export async function loadUnitsData() {
-    showLoading('Loading units data...');
-
+async function loadUnitsDataOnly() {
     try {
         // Try cache first
         const cached = await dbCache.getFresh('crashData', 'units-2012-2024', 7 * 24 * 60 * 60 * 1000);
 
         if (cached) {
             console.log('✅ Using cached units data');
             updateDataState({ unitsData: cached });
-            linkCrashData();
-
-            const { populateFilterOptions } = await import('./filters.js');
-            const { updateMarkerColorLegend } = await import('./map-renderer.js');
-
-            populateFilterOptions();
-            updateMarkerColorLegend();
-            await loadLGABoundaries();
-
             return cached;
         }
 
@@ -106,6 +95,24 @@ export async function loadUnitsData() {
             console.warn('Failed to cache units data:', cacheError);
         }
 
+        return unitsData;
+
+    } catch (error) {
+        console.error('Error loading units data:', error);
+        throw error;
+    }
+}
+
+/**
+ * Load units data with caching (legacy - kept for compatibility)
+ * @deprecated Use loadData() instead for parallel loading
+ */
+export async function loadUnitsData() {
+    showLoading('Loading units data...');
+
+    try {
+        const unitsData = await loadUnitsDataOnly();
+
         // Link data together
         linkCrashData();
 
@@ -122,27 +129,23 @@ export async function loadUnitsData() {
         return unitsData;
 
     } catch (error) {
-        console.error('Error loading units data:', error);
         hideLoading();
         alert('Error loading units data. Please check your connection and try again.');
         throw error;
     }
 }
 
 /**
- * Load casualty data with caching
+ * Load casualty data with caching (standalone version for parallel loading)
  */
-export async function loadCasualtyData() {
-    showLoading('Loading casualty data...');
-
+async function loadCasualtyDataOnly() {
     try {
         // Try cache first
         const cached = await dbCache.getFresh('crashData', 'casualty-2012-2024', 7 * 24 * 60 * 60 * 1000);
 
         if (cached) {
             console.log('✅ Using cached casualty data');
             updateDataState({ casualtyData: cached });
-            await loadUnitsData();
             return cached;
         }
 
@@ -164,35 +167,43 @@ export async function loadCasualtyData() {
             console.warn('Failed to cache casualty data:', cacheError);
         }
 
-        // Load units data next
-        await loadUnitsData();
-
         return casualtyData;
 
     } catch (error) {
         console.error('Error loading casualty data:', error);
+        throw error;
+    }
+}
+
+/**
+ * Load casualty data with caching (legacy - kept for compatibility)
+ * @deprecated Use loadData() instead for parallel loading
+ */
+export async function loadCasualtyData() {
+    showLoading('Loading casualty data...');
+
+    try {
+        await loadCasualtyDataOnly();
+        // Load units data next
+        await loadUnitsData();
+    } catch (error) {
         hideLoading();
         alert('Error loading casualty data. Please check your connection and try again.');
         throw error;
     }
 }
 
 /**
- * Load and decompress crash data with caching
+ * Load and decompress crash data with caching (standalone version for parallel loading)
  */
-export async function loadCrashData() {
-    showLoading('Loading crash data...');
-
+async function loadCrashDataOnly() {
     try {
         // Try to load from IndexedDB cache first
         const cached = await dbCache.getFresh('crashData', 'crash-2012-2024', 7 * 24 * 60 * 60 * 1000); // 7 days
 
         if (cached) {
             console.log('✅ Using cached crash data');
             updateDataState({ crashData: cached });
-
-            // Load casualty data next
-            await loadCasualtyData();
             return cached;
         }
 
@@ -231,13 +242,26 @@ export async function loadCrashData() {
             // Non-fatal, continue anyway
         }
 
-        // Load casualty data next
-        await loadCasualtyData();
-
         return crashData;
 
     } catch (error) {
         console.error('Error loading crash data:', error);
+        throw error;
+    }
+}
+
+/**
+ * Load and decompress crash data with caching (legacy - kept for compatibility)
+ * @deprecated Use loadData() instead for parallel loading
+ */
+export async function loadCrashData() {
+    showLoading('Loading crash data...');
+
+    try {
+        await loadCrashDataOnly();
+        // Load casualty data next
+        await loadCasualtyData();
+    } catch (error) {
         hideLoading();
         alert('Error loading crash data. Please check your connection and try again.');
         throw error;
@@ -364,12 +388,34 @@ export function precomputeLGAAssignments() {
 }
 
 /**
- * Main data loading function
+ * Main data loading function - parallelized for faster loading
  */
 export async function loadData() {
     try {
-        await loadCrashData();
-        // Casualty and units data are loaded in sequence by loadCrashData
+        // Load all three datasets in parallel for faster performance
+        showLoading('Loading crash data (1/3)...');
+
+        const [crashDataResult, casualtyDataResult, unitsDataResult] = await Promise.all([
+            loadCrashDataOnly(),
+            loadCasualtyDataOnly(),
+            loadUnitsDataOnly()
+        ]);
+
+        console.log('✅ All datasets loaded in parallel');
+
+        // Link data together after all loaded
+        linkCrashData();
+
+        // After linking, populate filter options and load boundaries
+        const { populateFilterOptions } = await import('./filters.js');
+        const { updateMarkerColorLegend } = await import('./map-renderer.js');
+
+        populateFilterOptions();
+        updateMarkerColorLegend();
+
+        // Load LGA boundaries (which will trigger initial filter application)
+        await loadLGABoundaries();
+
     } catch (error) {
         console.error('Failed to load data:', error);
     }

src/js/data-loader.js

@@ -3,7 +3,6 @@
  * Provides centralised error handling and recovery mechanisms
  */
 
-import { logger } from './logger.js';
 import { showNotification } from './ui.js';
 
 /**
@@ -35,14 +34,14 @@ class ErrorHandler {
     setupGlobalHandlers() {
         // Handle unhandled promise rejections
         window.addEventListener('unhandledrejection', (event) => {
-            logger.error('Unhandled promise rejection:', event.reason);
+            console.error('Unhandled promise rejection:', event.reason);
             this.handleError(event.reason, ERROR_TYPES.UNKNOWN, 'Unhandled Promise');
             event.preventDefault();
         });
 
         // Handle global errors
         window.addEventListener('error', (event) => {
-            logger.error('Global error:', event.error || event.message);
+            console.error('Global error:', event.error || event.message);
             this.handleError(
                 event.error || new Error(event.message),
                 ERROR_TYPES.UNKNOWN,
@@ -74,7 +73,7 @@ class ErrorHandler {
         }
 
         // Log error
-        logger.error(`[${type}] ${context}:`, error);
+        console.error(`[${type}] ${context}:`, error);
 
         // Show user notification if needed
         if (showUser) {