Skip to main content

Google Summer of Code 2025 Final Report

Project: Enhanced SwitchMap-NG Web Features
Contributor: Abhirami Muraleedharan Santhakumari
Mentors: Aashima Wadhwa, Dominic Mills
Organization: The Palisadoes Foundation
Duration: June - October 2025

About me​

I am Abhirami Muraleedharan Santhakumari, a Google Summer of Code 2025 contributor. I worked on a project to modernize the SwitchMap-NG web interface, improving usability, performance, and network insights.

Project overview​

The project was designed and implemented to provide a modern, interactive, and responsive web UI for network monitoring. This included integrating a Next.js/React frontend with the existing Flask backend, creating dynamic network topology visualizations using CDP/LLDP data, and providing historical device movement and bandwidth analysis. The focus was on improving performance, user experience, and maintainability while supporting large datasets efficiently.

Benefits

  • Enhanced performance and reduced network load through caching, memoization, and lazy loading.
  • Improved usability with responsive design, standardized error handling, and smooth interactions for large datasets.
  • Added a range of useful tools including interactive charts, graphs, and topology visualizations for better network insights.
  • Easier maintenance and scalability through modern frontend architecture and automated documentation generation.

Deliverables

  • Next.js/React-based UI replacing legacy Flask-table views.
  • Interactive network topology visualizations with CDP/LLDP data.
  • Historical bandwidth and device movement charts with time-based insights.
  • Automated documentation generation and GitHub Actions integration.
  • High test coverage ensuring reliable and maintainable code.

See Feature Highlights for detailed feature breakdown (Topology, History, Config, Performance, User Experience, Testing).

Project recap​

Developed a complete Next.js frontend for SwitchMap-NG, replacing deprecated Python web components with a modern React application. The new interface provides interactive network topology visualization, comprehensive device analytics, and advanced performance monitoring capabilities.

Media: SwitchMap-Ng UI

Feature Highlights​

A brief overview of the main frontend features.

Topology​

  • Interactive topology visualizations using vis-network for network graphs.
  • CDP/LLDP-based discovery rendering device interconnections.
  • Node interactions: click to select, double-click to navigate to device details, hover tooltips.
  • Features: device search, snapshot (PNG) export, zoom controls, hierarchical layouts.
  • Optimized rendering for large network datasets.
  • Media: Topology

History​

  • History Page:

    • Step-line charts tracking device sysName and zone changes over time.

  • Device Details:

    • Overview tab with system status (up/down), CPU and memory utilization charts.
    • Connection Charts tab with accordion-style connection lists and per-interface charts for:
      • Traffic (inbound/outbound octets)
      • Unicast and non-unicast packets
      • Error and discard tracking
      • Interface speed monitoring
    • Customizable historical ranges: 1 day, 1 week, 1 month, 6 months, custom.

  • Media:

    Device History

    Device Overview

    Connection Charts

Config​

  • Full configuration management UI with CRUD operations and inline editing.

  • Secure handling and masking of sensitive fields (passwords/secrets).

  • SNMP groups management with full SNMP v3 support and collapsible sections.

  • Intuitive state handling for configuration sections.

  • Media:

    Config Page - 1

    Config Page -2

Performance​

  • Lazy loading and code splitting for heavy components (TopologyChart, DeviceDetails, ConnectionCharts).
  • Caching: SWR with a 5-minute TTL (300 seconds) to reduce redundant API calls.
  • Request management: debounced inputs for search/filtering and AbortController to cancel in-flight requests.
  • Memoization (React.memo, useMemo, useCallback) and pagination/virtualized rendering for large datasets.
  • Loading performance: skeletons and Suspense boundaries for faster perceived load.

User Experience​

  • Responsive Design: Mobile-first approach with Tailwind CSS.

  • Theme Support: Seamless dark/light mode switching.

  • Error Handling: User-friendly error messages with auto-dismiss.

  • Loading States: Skeleton loading and Suspense boundaries.

  • Navigation: Intuitive sidebar with breadcrumb navigation.

  • Media:

    Responsiveness

Testing​

  • Vitest + React Testing Library with comprehensive coverage (reported 96.08%).
  • CI integration to run tests and report coverage; tests added and updated across PRs.

Technology Stack​

Frontend Framework:

  • Next.js 15.3.4 (App Router)
  • React 19.1.0 with TypeScript 5.x
  • Tailwind CSS 4.0

Data Visualization:

  • Recharts 3.1.0 for time-series charts
  • vis-network 9.1.13 for topology graphs
  • @tanstack/react-table 8.21.3 for data tables

Development Tools:

  • Vitest for unit testing
  • ESLint with Next.js configuration
  • TypeDoc for API documentation
  • SWR 2.3.6 for data fetching

Performance Metrics​

  • Bundle Size: Optimized with lazy loading and code splitting
  • Load Time: Optimized initial page load with effective caching
  • Memory Usage: Efficient data management with cleanup on unmount
  • Network Requests: Minimized through intelligent caching and request deduplication
  • Test Coverage: 96.08% comprehensive unit tests for all components and utilities

Architecture Decisions​

Component Structure:

  • Separation of concerns with dedicated components for visualization, data display, and user interaction
  • Custom hooks for data fetching and state management
  • Type-safe GraphQL integration with generated TypeScript types

Performance Strategy:

  • Client-side caching with configurable TTL
  • Request cancellation to prevent memory leaks
  • Efficient pagination for large datasets
  • Optimized re-rendering with React optimization patterns

Repository Integration​

  • Monorepo Structure: Frontend code resides within the main SwitchMap-NG repository, maintaining clear API boundaries between frontend and backend components.
  • GraphQL Communication: Exclusive use of existing GraphQL endpoints
  • Configuration: Environment-based API endpoint configuration

Completed work​

Pull Requests to SwitchMap-NG Repository​

The following pull requests were submitted to switchmap-ng during the GSoC 2025 period:

  1. #326 - Merged

    • Setup Next.js 15.3.4 with TypeScript configuration
    • Configured Tailwind CSS and theme support
    • Established project directory structure and initial components
    • Implemented responsive sidebar navigation and core UI functionality

  2. #330 - Merged

    • Migrated documentation styling from switchmap-ng-docs repository
    • Implemented TypeDoc for automated documentation generation
    • Configured pre-commit hook for documentation updates
    • Fixed broken internal links and made documentation site responsive

  3. #333 - Merged

    • Integrated vis-network for interactive topology charts
    • Implemented CDP/LLDP data visualization with search functionality
    • Added device selection and navigation features
    • Rich hover tooltips and export functionality for PNG images

  4. #337 - Merged

    • Developed device movement tracking with zone-based visualization
    • Implemented customizable time range controls with validation
    • Created Device Overview Tab with CPU, memory, and uptime charts
    • Added step-line charts for tracking device sysName and zone changes

  5. #341 - Merged

    • Established comprehensive testing suite with Vitest
    • Achieved >95% at time of PR (later increased to 96.08%) test coverage across all components
    • Introduced Connection Charts with accordion-style interface
    • Added pagination, expand/collapse controls, and CSV export

  6. #343 - Merged

    • Created dedicated Config Management page with CRUD operations
    • Implemented inline editing with authentication for sensitive fields
    • Added SNMP groups management with v3 support
    • Collapsible sections with intuitive state handling

  7. #349 - Merged

    • Implemented lazy loading and code splitting optimizations
    • Added 5-minute in-memory caching for device data
    • Request deduplication and debouncing for improved performance
    • Final bug fixes and responsive design improvements

  8. #354 - Merged

    • Unified backend and frontend branches for full application integration.
    • Updated GraphQL queries, API routes, and UI components for compatibility.
    • Added comprehensive frontend dashboard: interactive topology, device management, historical charts.
    • Implemented responsive UI: sidebar navigation, zone/device filtering, theme toggle (dark/light).
    • Expanded configuration management interface for zones and SNMP settings.
    • Device history tracking with time-range filtering.
    • Added extensive frontend tests (Vitest) and CI/CD integration with coverage reporting.
    • Updated and expanded documentation: installation, testing, frontend architecture, and component specifications.

  9. Bug Fixes

  • #358 - Merged

    • Extracted caches and history utilities into dedicated modules.
    • Refactored ConnectionCharts for per-page expansion, CSV export, and improved state management.
    • Centralized config caching and inline editing logic.
    • Added explicit GraphQL/visualization types for better type safety.
    • Tightened component typings and improved error handling across DeviceDetails, LineChartWrapper, and TopologyChart.
    • Updated tests for ConnectionCharts, DeviceDetails, and TopologyChart; fixed GraphQL field name issues.
    • Enhanced global styling, scrollbars, and ESLint configurations.
    • Backend config route: added unit tests covering secret masking, deep merges, file I/O, YAML errors, and API behavior.

  • #361

    • Improved UI consistency and responsiveness across components.
    • Added labels for Zone and Time Range dropdowns.
    • Made ConnectionCharts more responsive.
    • Removed redundant overflow-y-auto in Config page to fix double scrollbar issue

Current State​

The SwitchMap-NG frontend is now fully functional with a modern React/Next.js interface. Core features, including interactive network topology visualization, device analytics, historical charts, configuration management, and theme support, are implemented and stable. The system supports responsive design, and has high test coverage (96.08%). Remaining work mostly involves advanced enhancements, simulations, and optimizations.

What Remains​

  • SNMP Simulation Lab: Setting up an SNMP-based simulated device lab will help new contributors test and develop features without requiring real network hardware.
  • Device Status Reliability: Currently, devices that fail to respond are omitted from events and never appear as "down" in the frontend. Improving this requires coordinated changes to both frontend and backend logic.
  • Support for Non-SNMP Devices: Extend monitoring capabilities to include devices managed by other network protocols.
  • Database Optimization: Implement data aggregation and cleanup mechanisms to manage historical event data more efficiently.
  • Responsive Graph Enhancements: Minor adjustments are needed to ensure graphs remain fully responsive across all screen sizes.
  • Configuration Management: Move configuration fields from server-side YAML files to the database for better scalability and security, while maintaining safe password handling.
  • Dynamic Chart Rendering: Add options for users to choose which charts to render globally or per device/interface, with backend support for dynamic polling based on these preferences.

Challenges and lessons learned​

  • Customizing vis-network: The network canvas did not respond to theme changes automatically, requiring manual theme handling and color adjustments.
  • Designing an intuitive frontend: As this was a new frontend, creating prototypes and iterating based on mentor and user feedback was essential before implementation.
  • Complex data querying: The database structure, where each event stored a snapshot of all devices, made efficient querying and rendering in the frontend challenging.
  • Learned to balance performance with usability by deferring heavy chart rendering and using caching.
  • Improved skills in integrating modern frontend frameworks (Next.js, React 19, Tailwind 4) with legacy backend systems.
  • Gained deeper understanding of GraphQL schema design and efficient data querying.
  • Realized the importance of modular architecture, testing, and documentation for long-term maintainability.
  • Strengthened debugging and design iteration skills through close mentor feedback and cross-component troubleshooting.

Conclusion​

This project was an invaluable learning experience in frontend architecture, API integration, and open-source collaboration.

Acknowledgements: I am grateful to mentors Aashima Wadhwa, Dominic Mills, and Peter Harrison for their technical guidance, feedback, and code reviews throughout the development process. I would like to thank Abhishek Raj, the backend contributor, for his seamless collaboration.

Links & Resources​