Dependencies and Package Management - seojedaperez/IgnisMap GitHub Wiki

This document provides comprehensive information about IgnisMap's dependency management, package structure, and integration requirements for the emergency fire prediction and response system.

Package Overview

IgnisMap is built as a Progressive Web Application using modern JavaScript technologies with extensive Azure cloud service integrations. 1

graph TB
    subgraph "IgnisMap Core Dependencies"
        React["react: ^18.2.0<br/>react-dom: ^18.2.0<br/>react-router-dom: ^6.20.1"]
        TypeScript["typescript: ^5.2.2<br/>@types/react<br/>@types/react-dom"]
        Vite["vite: ^4.5.0<br/>@vitejs/plugin-react<br/>vite-plugin-pwa: ^0.17.4"]
    end
    
    subgraph "Azure Service Dependencies"
        AzureCore["@azure/core-auth: ^1.4.0<br/>@azure/identity: ^3.2.3<br/>@azure/cosmos: ^3.17.3"]
        AzureAI["@azure/ai-text-analytics: ^5.1.0<br/>@azure/cognitiveservices-computervision<br/>@azure/ai-anomaly-detector: ^3.0.0-beta.5"]
        AzureComm["@azure/communication-calling: ^1.5.3<br/>@microsoft/signalr: ^7.0.5<br/>@microsoft/applicationinsights-web: ^2.8.11"]
    end
    
    subgraph "Mapping & Visualization"
        Maps["azure-maps-control: ^3.0.4<br/>leaflet: ^1.9.4<br/>react-leaflet: ^4.2.1"]
        Charts["recharts: ^2.8.0<br/>lucide-react: ^0.294.0"]
    end
    
    React --> AzureCore
    TypeScript --> AzureAI
    Vite --> AzureComm
    Maps --> Charts
Loading

Core Dependencies Structure

Frontend Framework Dependencies

The application uses React 18 with TypeScript for type safety and modern development practices. 2

flowchart TD
    subgraph "Frontend Stack"
        React18["React 18.2.0<br/>Modern Hooks & Concurrent Features"]
        ReactDOM["React DOM 18.2.0<br/>Rendering Engine"]
        ReactRouter["React Router DOM 6.20.1<br/>Client-side Routing"]
        TypeScript["TypeScript 5.2.2<br/>Type Safety"]
    end
    
    subgraph "Build & Development"
        Vite["Vite 4.5.0<br/>Fast Build Tool"]
        ViteReact["@vitejs/plugin-react<br/>React Integration"]
        VitePWA["vite-plugin-pwa 0.17.4<br/>Progressive Web App"]
        ESLint["ESLint + TypeScript Rules<br/>Code Quality"]
    end
    
    React18 --> ReactDOM
    ReactDOM --> ReactRouter
    ReactRouter --> TypeScript
    TypeScript --> Vite
    Vite --> ViteReact
    ViteReact --> VitePWA
    VitePWA --> ESLint
Loading

Azure Cloud Integration Dependencies

IgnisMap integrates with over 15 Azure services through specialized npm packages. 3

graph TB
    subgraph "Azure Authentication & Core"
        CoreAuth["@azure/core-auth: ^1.4.0<br/>Authentication Framework"]
        Identity["@azure/identity: ^3.2.3<br/>Azure AD Integration"]
        AppConfig["@azure/app-configuration: ^1.4.1<br/>Configuration Management"]
    end
    
    subgraph "Azure Data Services"
        Cosmos["@azure/cosmos: ^3.17.3<br/>Document Database"]
        DataTables["@azure/data-tables: ^13.2.2<br/>Table Storage"]
        StorageBlob["@azure/storage-blob: ^12.17.0<br/>Blob Storage"]
        StorageQueue["@azure/storage-queue: ^12.14.0<br/>Queue Storage"]
        KeyVault["@azure/keyvault-secrets: ^4.7.0<br/>Secret Management"]
    end
    
    subgraph "Azure AI & Cognitive Services"
        TextAnalytics["@azure/ai-text-analytics: ^5.1.0<br/>Text Processing"]
        ComputerVision["@azure/cognitiveservices-computervision<br/>Image Analysis"]
        AnomalyDetector["@azure/ai-anomaly-detector: ^3.0.0-beta.5<br/>Pattern Detection"]
        FormRecognizer["@azure/ai-form-recognizer: ^4.0.0<br/>Document Processing"]
    end
    
    subgraph "Azure Communication & Monitoring"
        CommCalling["@azure/communication-calling: ^1.5.3<br/>Voice Communication"]
        CommChat["@azure/communication-chat: ^1.3.2<br/>Chat Services"]
        SignalR["@microsoft/signalr: ^7.0.5<br/>Real-time Communication"]
        AppInsights["@microsoft/applicationinsights-web: ^2.8.11<br/>Application Monitoring"]
        OpenTelemetry["@azure/monitor-opentelemetry: ^1.0.0<br/>Telemetry Collection"]
    end
    
    CoreAuth --> Identity
    Identity --> AppConfig
    Cosmos --> DataTables
    DataTables --> StorageBlob
    StorageBlob --> KeyVault
    TextAnalytics --> ComputerVision
    ComputerVision --> AnomalyDetector
    CommCalling --> SignalR
    SignalR --> AppInsights
Loading

Mapping and Geospatial Dependencies

The system uses dual mapping libraries for comprehensive geospatial functionality. 4

graph LR
    subgraph "Azure Maps Integration"
        AzureMapsControl["azure-maps-control: ^3.0.4<br/>Professional Mapping"]
        AzureMapsDrawing["azure-maps-drawing-tools: ^1.0.0<br/>Zone Drawing"]
        AzureMapsRest["azure-maps-rest: ^2.0.5<br/>REST API Client"]
    end
    
    subgraph "Leaflet Integration"
        Leaflet["leaflet: ^1.9.4<br/>Open Source Mapping"]
        ReactLeaflet["react-leaflet: ^4.2.1<br/>React Components"]
        LeafletDraw["leaflet-draw: ^1.0.4<br/>Drawing Tools"]
        ReactLeafletDraw["react-leaflet-draw: ^0.20.6<br/>React Drawing Integration"]
    end
    
    subgraph "Visualization Libraries"
        Recharts["recharts: ^2.8.0<br/>Chart Components"]
        LucideReact["lucide-react: ^0.294.0<br/>Icon Library"]
        Clsx["clsx: ^2.0.0<br/>Conditional Classes"]
    end
    
    AzureMapsControl --> AzureMapsDrawing
    AzureMapsDrawing --> AzureMapsRest
    Leaflet --> ReactLeaflet
    ReactLeaflet --> LeafletDraw
    LeafletDraw --> ReactLeafletDraw
    Recharts --> LucideReact
    LucideReact --> Clsx
Loading

Development Dependencies

Development tooling focuses on code quality, type safety, and build optimization. 5

flowchart TD
    subgraph "Type Definitions"
        TypesReact["@types/react: ^18.2.37<br/>React Type Definitions"]
        TypesLeaflet["@types/leaflet: ^1.9.8<br/>Leaflet Type Definitions"]
        TypesLeafletDraw["@types/leaflet-draw: ^1.0.11<br/>Drawing Tools Types"]
        TypesProj4["@types/proj4: ^2.5.5<br/>Projection Library Types"]
    end
    
    subgraph "Code Quality Tools"
        ESLintCore["eslint: ^8.53.0<br/>Linting Engine"]
        TSESLint["@typescript-eslint/eslint-plugin: ^6.10.0<br/>TypeScript Rules"]
        TSParser["@typescript-eslint/parser: ^6.10.0<br/>TypeScript Parser"]
        ReactHooks["eslint-plugin-react-hooks: ^4.6.0<br/>React Hooks Rules"]
        ReactRefresh["eslint-plugin-react-refresh: ^0.4.4<br/>Fast Refresh Rules"]
    end
    
    subgraph "Styling & Build"
        TailwindCSS["tailwindcss: ^3.3.5<br/>Utility-First CSS"]
        PostCSS["postcss: ^8.4.31<br/>CSS Processing"]
        Autoprefixer["autoprefixer: ^10.4.16<br/>CSS Vendor Prefixes"]
    end
    
    TypesReact --> TypesLeaflet
    TypesLeaflet --> ESLintCore
    ESLintCore --> TSESLint
    TSESLint --> ReactHooks
    ReactHooks --> TailwindCSS
    TailwindCSS --> PostCSS
Loading

Optional Dependencies for Advanced Features

Optional dependencies provide enhanced geospatial and mathematical capabilities. 6

graph TB
    subgraph "Optional Geospatial Libraries"
        GeoTIFF["geotiff: ^2.0.7<br/>Satellite Image Processing"]
        Proj4["proj4: ^2.9.2<br/>Coordinate Projections"]
        Turf["turf: ^3.0.14<br/>Geospatial Analysis"]
        MLMatrix["ml-matrix: ^6.10.7<br/>Mathematical Operations"]
    end
    
    subgraph "Use Cases"
        SatelliteProcessing["Satellite Data Processing<br/>NASA FIRMS Integration"]
        CoordinateTransformation["Map Projection Conversion<br/>Multi-CRS Support"]
        GeospatialAnalysis["Fire Spread Calculations<br/>Zone Analysis"]
        MachineLearning["AI Model Support<br/>Pattern Recognition"]
    end
    
    GeoTIFF --> SatelliteProcessing
    Proj4 --> CoordinateTransformation
    Turf --> GeospatialAnalysis
    MLMatrix --> MachineLearning
Loading

Package Management Scripts

The application includes comprehensive build and development scripts. 7

flowchart LR
    subgraph "Development Scripts"
        Dev["npm run dev<br/>Start Development Server"]
        TypeCheck["npm run type-check<br/>TypeScript Validation"]
        Lint["npm run lint<br/>Code Quality Check"]
    end
    
    subgraph "Build Scripts"
        Build["npm run build<br/>Production Build"]
        BuildNetlify["npm run build:netlify<br/>Netlify Deployment"]
        BuildAnalyze["npm run build:analyze<br/>Bundle Analysis"]
    end
    
    subgraph "Utility Scripts"
        Preview["npm run preview<br/>Preview Production Build"]
        Clean["npm run clean<br/>Clean Build Artifacts"]
    end
    
    Dev --> TypeCheck
    TypeCheck --> Lint
    Build --> BuildNetlify
    BuildNetlify --> BuildAnalyze
    Preview --> Clean
Loading

Azure Service Dependencies Integration

The application context providers manage Azure service integrations through dedicated contexts. 8

sequenceDiagram
    participant App as "App Component"
    participant Emergency as "EmergencyProvider"
    participant Alert as "AlertProvider"
    participant Weather as "WeatherProvider"
    participant AI as "MicrosoftAIProvider"
    participant Azure as "Azure Services"
    
    App->>Emergency: Initialize emergency context
    App->>Alert: Initialize alert management
    App->>Weather: Initialize weather data
    App->>AI: Initialize AI services
    
    Emergency->>Azure: Connect to Cosmos DB
    Alert->>Azure: Connect to Event Hubs
    Weather->>Azure: Connect to Cognitive Services
    AI->>Azure: Connect to OpenAI Services
    
    Azure-->>AI: Service responses
    AI-->>Weather: Processed data
    Weather-->>Alert: Weather alerts
    Alert-->>Emergency: Emergency notifications
    Emergency-->>App: Updated state
Loading

Build Configuration and Optimization

Vite configuration optimizes dependencies for production deployment. 9

graph TB
    subgraph "Optimized Dependencies"
        Included["Included in Bundle<br/>react, react-dom<br/>react-router-dom<br/>leaflet, react-leaflet"]
        Excluded["Excluded from Bundle<br/>@azure/cognitiveservices-computervision<br/>geotiff"]
    end
    
    subgraph "Build Optimizations"
        TreeShaking["Tree Shaking<br/>Remove Unused Code"]
        CodeSplitting["Code Splitting<br/>Lazy Loading"]
        Minification["Minification<br/>Size Optimization"]
    end
    
    subgraph "Runtime Configuration"
        GlobalPolyfill["global: globalThis<br/>Node.js Compatibility"]
        PWAConfig["PWA Configuration<br/>Service Worker"]
    end
    
    Included --> TreeShaking
    Excluded --> CodeSplitting
    TreeShaking --> Minification
    CodeSplitting --> GlobalPolyfill
    Minification --> PWAConfig
Loading

End-to-End Testing Pipeline

flowchart TD
    subgraph "Testing Pipeline"
        UnitTests["Unit Tests<br/>Component Testing"]
        IntegrationTests["Integration Tests<br/>Azure Service Testing"]
        E2ETests["End-to-End Tests<br/>Full Application Flow"]
    end
    
    subgraph "Deployment Validation"
        StagingDeploy["Staging Deployment<br/>Pre-production Testing"]
        ProductionDeploy["Production Deployment<br/>Blue-Green Strategy"]
        RollbackPlan["Rollback Strategy<br/>Version Pinning"]
    end
    
    NPMAudit --> UnitTests
    DependaBot --> IntegrationTests
    SecurityAlerts --> E2ETests
    UnitTests --> StagingDeploy
    IntegrationTests --> ProductionDeploy
    E2ETests --> RollbackPlan
Loading

Package Installation and Setup

Prerequisites and Environment Setup 1 

graph TB
    subgraph "Development Environment"
        NodeJS["Node.js 18+<br/>LTS Version Required"]
        NPM["npm 9+<br/>Package Manager"]
        TypeScript["TypeScript 5.2.2<br/>Global Installation"]
    end
    
    subgraph "Azure Prerequisites"
        AzureAccount["Azure Subscription<br/>Active Account Required"]
        AzureCLI["Azure CLI<br/>Authentication Tool"]
        ResourceGroup["Azure Resource Group<br/>ignismap-resources"]
    end
    
    subgraph "Development Tools"
        VSCode["VS Code<br/>Recommended IDE"]
        Extensions["Azure Extensions<br/>TypeScript Support"]
        Git["Git 2.40+<br/>Version Control"]
    end
    
    NodeJS --> NPM
    NPM --> TypeScript
    AzureAccount --> AzureCLI
    AzureCLI --> ResourceGroup
    VSCode --> Extensions
    Extensions --> Git
Loading

Installation Commands

# Clone the repository
git clone https://github.com/seojedaperez/IgnisMap.git
cd IgnisMap

# Install dependencies
npm install

# Install optional dependencies for advanced features
npm install --include=optional

# Development server
npm run dev

# Type checking
npm run type-check

# Production build
npm run build

Dependency Categories and Usage

Core Application Dependencies 2 

graph LR
    subgraph "React Ecosystem"
        ReactCore["react: ^18.2.0<br/>Core Library"]
        ReactDOM["react-dom: ^18.2.0<br/>DOM Rendering"]
        ReactRouter["react-router-dom: ^6.20.1<br/>Navigation"]
    end
    
    subgraph "UI Components"
        FluentUI["@fluentui/react: ^8.110.7<br/>Microsoft Design System"]
        FluentUIComponents["@fluentui/react-components: ^9.30.3<br/>Modern Components"]
        LucideReact["lucide-react: ^0.294.0<br/>Icon System"]
    end
    
    subgraph "Data Visualization"
        Recharts["recharts: ^2.8.0<br/>Chart Library"]
        DateFns["date-fns: ^2.30.0<br/>Date Utilities"]
        Clsx["clsx: ^2.0.0<br/>CSS Classes"]
    end
    
    ReactCore --> ReactDOM
    ReactDOM --> ReactRouter
    FluentUI --> FluentUIComponents
    FluentUIComponents --> LucideReact
    Recharts --> DateFns
    DateFns --> Clsx
Loading

Azure Service Integration Architecture 3 

sequenceDiagram
    participant App as "IgnisMap Application"
    participant Auth as "@azure/identity"
    participant Cosmos as "@azure/cosmos"
    participant AI as "Azure AI Services"
    participant Storage as "@azure/storage-blob"
    participant KeyVault as "@azure/keyvault-secrets"
    
    App->>Auth: Authenticate with Azure AD
    Auth-->>App: Access token
    
    App->>KeyVault: Retrieve connection strings
    KeyVault-->>App: Secure credentials
    
    App->>Cosmos: Initialize database connection
    Cosmos-->>App: Database client
    
    App->>AI: Initialize cognitive services
    AI-->>App: AI service clients
    
    App->>Storage: Initialize blob storage
    Storage-->>App: Storage client
    
    Note over App,Storage: All services authenticated via Azure Identity
Loading

Build and Deployment Configuration

Vite Build Optimization 4 

graph TB
    subgraph "Bundle Optimization"
        OptimizedDeps["Optimized Dependencies<br/>react, react-dom, leaflet"]
        ExcludedDeps["Excluded Dependencies<br/>@azure/cognitiveservices-computervision<br/>geotiff"]
        GlobalPolyfill["Global Polyfill<br/>globalThis compatibility"]
    end
    
    subgraph "Build Process"
        TypeScriptCompile["TypeScript Compilation<br/>tsc && vite build"]
        AssetOptimization["Asset Optimization<br/>Image compression, CSS minification"]
        PWAGeneration["PWA Generation<br/>Service worker, manifest"]
    end
    
    subgraph "Output Structure"
        DistFolder["dist/<br/>Production build"]
        StaticAssets["Static Assets<br/>Images, fonts, icons"]
        ServiceWorker["Service Worker<br/>Offline functionality"]
    end
    
    OptimizedDeps --> TypeScriptCompile
    ExcludedDeps --> AssetOptimization
    GlobalPolyfill --> PWAGeneration
    TypeScriptCompile --> DistFolder
    AssetOptimization --> StaticAssets
    PWAGeneration --> ServiceWorker
Loading

Development Scripts Workflow 5 

flowchart TD
    subgraph "Development Workflow"
        Start["npm run dev<br/>Start development server"]
        TypeCheck["npm run type-check<br/>Validate TypeScript"]
        Lint["npm run lint<br/>Code quality check"]
        Build["npm run build<br/>Production build"]
    end
    
    subgraph "Quality Gates"
        ESLintCheck["ESLint validation<br/>--max-warnings 0"]
        TypeScriptCheck["TypeScript compilation<br/>--noEmit"]
        BuildSuccess["Build success<br/>Ready for deployment"]
    end
    
    subgraph "Deployment Options"
        Preview["npm run preview<br/>Local preview"]
        Netlify["npm run build:netlify<br/>Netlify deployment"]
        Analyze["npm run build:analyze<br/>Bundle analysis"]
    end
    
    Start --> TypeCheck
    TypeCheck --> Lint
    Lint --> Build
    ESLintCheck --> TypeScriptCheck
    TypeScriptCheck --> BuildSuccess
    Build --> Preview
    Build --> Netlify
    Build --> Analyze
Loading

Context Providers and Service Integration

Application Context Architecture 6 

graph TB
    subgraph "Context Provider Hierarchy"
        EmergencyProvider["EmergencyProvider<br/>Emergency management state"]
        AlertProvider["AlertProvider<br/>Alert system management"]
        WeatherProvider["WeatherProvider<br/>Weather data integration"]
        MicrosoftAIProvider["MicrosoftAIProvider<br/>AI service integration"]
    end
    
    subgraph "Azure Service Connections"
        AppInsights["appInsights<br/>Application monitoring"]
        CosmosDB["Cosmos DB<br/>Emergency data storage"]
        CognitiveServices["Cognitive Services<br/>AI processing"]
        EventHubs["Event Hubs<br/>Real-time alerts"]
    end
    
    subgraph "Data Flow"
        SatelliteData["NASA FIRMS Data<br/>Satellite fire detection"]
        WeatherData["Weather APIs<br/>Meteorological data"]
        EmergencyData["Emergency Organizations<br/>Resource management"]
    end
    
    EmergencyProvider --> CosmosDB
    AlertProvider --> EventHubs
    WeatherProvider --> CognitiveServices
    MicrosoftAIProvider --> AppInsights
    
    SatelliteData --> EmergencyProvider
    WeatherData --> WeatherProvider
    EmergencyData --> AlertProvider
Loading

Performance and Monitoring

Application Insights Integration

sequenceDiagram
    participant User as "User Interface"
    participant App as "IgnisMap App"
    participant AppInsights as "Application Insights"
    participant Azure as "Azure Monitor"
    
    User->>App: User interaction
    App->>AppInsights: Track page view
    App->>AppInsights: Track custom events
    
    Note over App,AppInsights: Real-time telemetry
    
    AppInsights->>Azure: Aggregate metrics
    Azure->>AppInsights: Performance data
    
    AppInsights-->>App: Performance insights
    App-->>User: Optimized experience
Loading

Bundle Analysis and Optimization

graph LR
    subgraph "Bundle Analysis"
        BuildAnalyze["npm run build:analyze<br/>Bundle size analysis"]
        ViteBundleAnalyzer["vite-bundle-analyzer<br/>Visual dependency tree"]
        PerformanceMetrics["Performance Metrics<br/>Load time optimization"]
    end
    
    subgraph "Optimization Strategies"
        CodeSplitting["Code Splitting<br/>Route-based chunks"]
        TreeShaking["Tree Shaking<br/>Dead code elimination"]
        LazyLoading["Lazy Loading<br/>Component-level loading"]
    end
    
    subgraph "Monitoring"
        WebVitals["Core Web Vitals<br/>Performance tracking"]
        UserExperience["User Experience<br/>Real user monitoring"]
        ErrorTracking["Error Tracking<br/>Exception monitoring"]
    end
    
    BuildAnalyze --> CodeSplitting
    ViteBundleAnalyzer --> TreeShaking
    PerformanceMetrics --> LazyLoading
    CodeSplitting --> WebVitals
    TreeShaking --> UserExperience
    LazyLoading --> ErrorTracking
Loading

Notes

This comprehensive Dependencies and Package Management documentation covers all aspects of IgnisMap's dependency structure, from core React components to Azure cloud service integrations. The system uses over 30 specialized packages for emergency fire prediction and response capabilities, with extensive Azure service integration for AI processing, real-time communication, and data storage. The build system is optimized for Progressive Web App deployment with comprehensive monitoring and performance tracking through Azure Application Insights.

⚠️ **GitHub.com Fallback** ⚠️