GSOC 2025: Enhanced SwitchMap-NG Web Features

[Abhi-MS]

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.

SwitchMap-NG.mp4

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.mp4

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.mp4
  Device.Overview.Tab.mp4
  Connection.Charts.mp4

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.mp4

Config-Pass.mp4

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.mp4

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. Initial Frontend Implementation for switchmap-ng [GSOC 2025] #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. Migrate Docs and Set Up Auto-Generated Documentation [GSOC 2025] #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. Implement Network Topology Chart [GSOC 2025] #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. Develop History Page & Device Overview Tab with Device's Historical Metrics [GSOC 2025] #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. Connection Charts Page & Testing > 95% Frontend Coverage [GSOC 2025]  #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. Create Config Management Page and update documentation [GSOC 2025]  #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. Final Frontend Touch-Up for SwitchMap UI [GSOC 2025] #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. Integrate Backend and Frontend Changes [GSOC 2025] #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

• Build Fixes and Config Test File Improvements [GSOC 2025] #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.

• Final UI Bug Fix [GSOC 2025]  #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.

Responsiveness-1.mp4

• 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

• Repository: SwitchMap-NG Frontend
• Documentation Styles: switchmap-ng-docs
• API Documentation: GraphQL Schema

---

[Abhi-MS]

GSoC Project Week 1 Update

• Researched network tools (Cacti, LibreNMS) to define key UI/UX elements.
• Refined Figma designs: dashboard, device & port pages with navigation and hover effects.
• Handled tricky UI challenges (hover/click conflicts, scroll behaviors, tab navigation).
• Learned useful Figma workflows (Google Sheets plugin, color inversion, bulk edits).
• Next: Finalize Figma design as per feedback; begin React frontend with Next.js, set up a UI skeleton with styled pages & placeholders.

Figma design video

[Abhi-MS]

GSoC Project – Week 2 Update

UI Redesign & Usability Enhancements

This week focused on redesigning the user interface based on mentor feedback and multiple iterations. The goal was to improve the design for better usability, streamline navigation, and optimize performance by reducing unnecessary load times.

Challenges Encountered

• The initial chart selection interface was unintuitive and performance-heavy, as charts would be rendered upon selection. This would make caching difficult and hinder the user experience. It was later redesigned into a collapsible list format with time range selection for better usability and performance.

• Hover interactions in Figma conflicted with click-based navigation, especially for pop-ups. A workaround using mouse enter and delay was applied, though it remains an imperfect solution.

• Tabbed navigation was difficult to implement due to Figma’s limitations with nested components. As a workaround, page duplication with navigation links was used to simulate tab behavior.

UI Improvements

Dashboard:

• Device list is now categorized into Switchmap-monitored and non-monitored sections for clearer organization.

Device Details Page:

• Structured into three tabs, accessed via a collapsible sidebar:

  • Device Overview – Displays a mini topology graph, metadata, and key device-level charts (CPU, memory, uptime).
  • Connection Details – Includes the full connection table from the existing Switchmap data.
  • Connection Charts – Uses a collapsible list layout. Users can select a time range and expand individual ports to view related charts (bandwidth, packets, errors, discards), improving performance through chart caching.

Navigation:

• Clicking on a device now routes users to the updated Device Details page with enhanced structure and responsiveness.

Key Learnings

• Resolved sticky scrolling issues by converting rectangles to frames and enabling scroll behaviors.
• Used the Google Sheets Sync plugin to populate tables in Figma. Auto-fill features didn’t work as expected, requiring manual row duplication.
• Discovered multi-select via search to enable batch edits efficiently.
• Applied the Invert Color plugin to support both dark and light mode themes.

Next Steps

• Begin frontend implementation using Next.js, starting with styled skeleton pages and placeholders.

Short Summary
Refined the UI through multiple feedback loops. Redesigned the dashboard and device pages with improved structure and collapsible charts.

Video Prototype

[Abhi-MS]

GSoC Project – Week 3 Update

Goals Achieved

• Created Next.js (TypeScript) app using App Router
• Integrated frontend with Flask backend (CORS enabled)
• Set up routing for / and /device/[id]
• Added global and modular CSS
• Removed default favicon and boilerplate files
• Implemented light/dark theme toggle
• Started integrating device and port tables

Video

Implementation Steps

1. App Setup

npx create-next-app@latest frontend --typescript

App Router: Yes | Tailwind: No | ESLint: Yes | src dir: Yes
Latest update: Switch to Tailwind

2. Cleanup

• Removed default assets (favicon.ico, vercel.svg)
• Updated metadata in layout.tsx

3. Backend Integration
   Enabled CORS in Flask:

from flask_cors import CORS
CORS(API, resources={r"/switchmap/api/graphql": {"origins": "http://localhost:3000"}}, supports_credentials=True)

Sample query for device table:

{
  devices {
    edges {
      node {
        id
        sysName
      }
    }
  }
}

4. Device Type Detection
   Basic OID mapping (Cisco, Juniper):

const mapOidToType = (oid: string | null) => {
  if (!oid) return "-";
  if (oid.startsWith(".1.3.6.1.4.1.9.1.")) return "Cisco";
  if (oid.startsWith(".1.3.6.1.4.1.2636.1.")) return "Juniper";
  return "Unknown";
};

Latest Update: Remove type from devices overview table

5. Styling & Navigation

• Global CSS: src/styles/globals.css
• Page/component styles: CSS Modules
• URL hash scrolling + manual scrollIntoView on load for smoother back navigation

Latest Update: Migrate to Tailwind CSS

• Dark/Light Mode - Configured with next-themes:

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>
Toggle Button using useTheme() with icons

Key Learnings/Challenges

• Learned Next.js App Router and dynamic routing
• Improved UI responsiveness and styling separation (global vs modular)
• Enabled smooth scroll restoration using URL hashes
• Learned API integration patterns and CORS setup with Flask
• Explored early-stage device classification via OID
• Understood pros/cons of using React for frontend and Flask for backend

Architecture Overview

• Frontend: Next.js 15.3.3 + React 19.1.0
• Backend: Flask + GraphQL
• Separation of concerns for performance, flexibility, and maintainability
• Chart-heavy components planned for upcoming visualizations

Next Steps (Week 4–5)

• Finalize device and port table integration
• Improve UI styling and consistency
• Integrate Tailwind CSS
• Ensure responsiveness
• Begin testing
• Start Network Topology visualization component
• Investigate: Compatibility with React 19, Usage of Apollo Client or Redux

[Abhi-MS]

GSoC Project – Week 4 Update

Goals Achieved

• Switched to Tailwind CSS (v4) and restructured the frontend styles.
• Tailwind config now handled via @theme in CSS instead of a separate JS file.

@import "tailwindcss";
@theme {
  --color-bg: var(--bg-color);
  --color-text: var(--text-color);
  --color-link: var(--link-color);
  --color-button-bg: var(--button-bg);
  --color-button-text: var(--button-text);

• Set up next-themes for theme persistence with fallback to system preference.

• Upgraded tables to use @tanstack/react-table. Add sort and search features to the devices overview table.
  

• Updated GraphQL query to fetch devices based on selected zone:

body: JSON.stringify({
            query: `
            query GetZoneDevices($id: ID!) {
              zone(id: $id) {
                devices {
                  edges {
                    node {
                      idxDevice
                      sysObjectid
                      sysUptime
                      sysName
                      hostname
                      l1interfaces {
                        edges {
                          node {
                            ifoperstatus
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          `,
            variables: {
              id: zoneId,
            },
          }),

• Worked on the "Connection Details" page.
• Added multiple GraphQL queries to retrieve MAC/IP mappings and port-level MACs.
• MAC addresses are retrieved using port IDs, and ip addresses are retrieved using MAC IDs.
  const MACPORTS_QUERY = (ids: number[]) =>
  {
  macports(filter: { idxL1interface: { in: [${ids.join(",")}] } }) {
  edges {
  node {
  id
  idxMac
  idxL1interface
  macs {
  mac
  oui {
  organization
  }
  }
  }
  }
  }
  }
  ; const MACIPS_QUERY = (ids: number[]) =>
  {
  macips(filter: { idxMac: { in: [${ids.join(",")}] } }) {
  edges {
  node {
  id
  idxMac
  ips {
  address
  hostname
  }
  macs {
  idxMac
  }
  }
  }
  }
  }
  ;

Key Learnings
-Tailwind v4 introduces CSS-based configuration, reducing boilerplate and simplifying theme management.
-Fine-tuning GraphQL queries is crucial—structure and filters directly impact result accuracy.
-next-themes integration works seamlessly but requires awareness of FOUC (Flash of Unstyled Content).

Challenges

• Backend inconsistencies:
• Some idxMac values returned from ports don't exist in macips, causing data mismatches.
• ipport queries returned empty even when MACs exist.
• The schema needs to expose additional data to enable more efficient queries and improve loading performance.

Next Steps

• Investigate and fix schema mismatches (mac, ipport, idxMac issues).
• Refactor the schema to expose additional details and optimize query performance.
• Begin development of the Topology Graph component.
• Improve loading logic and fallback UI for GraphQL data fetching.
• Improve responsiveness and overall styling

[Abhi-MS]

GSoC Project – Week 5 Update

Goals Achieved

Switchmap.PR.1.1.mp4

Switchmap.PR.1.2.mp4

Switchmap.PR.1.3.mp4

Switchmap.PR.1.4.mp4

Switchmap.PR.1.5mp4.mp4

• UI Cleanup

  • Refactored the codebase for improved maintainability.
  • Organized components, removed unused logic, and simplified overall structure.

• Dashboard & Device Navigation Fixes

  • Implemented scroll restoration using #devices-overview in the URL when navigating back from the Device Details page.
  • Persisted selected zone across reloads using localStorage to avoid fallback to default zone.

• Responsive Improvements
  Sidebar:

  • Fixed spacing and alignment issues.
  • Made collapsible on smaller screens.

  Devices Overview Table:

  • Made horizontally scrollable to better handle overflow on smaller viewports.

• Styling & UX Enhancements

  • Improved fallback UI and loading states for GraphQL data fetching.
  • Enhanced accessibility: added keyboard navigation for tables and ensured the color palette is colorblind-friendly.
  • Refined hover interactions for better visual feedback.

• Table Functionality

  • Added sort and filter functionality to the devices overview table using @tanstack/react-table.
  • Displayed MAC addresses and manufacturer details in the connection details table.
  • IP address fetching pending schema update.

• Dashboard Improvements

  • Device Details page now updates dynamically based on the selected zone.
  • Started development of the Topology Graph component.

Topology change according to zone

Searched device is zoomed in and highlighted

Key Learnings

• Effective state and URL management improves user experience across navigations.
• Small UI enhancements (scroll, feedback, accessibility) significantly improve usability.
• Component-level organization speeds up future development and debugging.

Challenges

• IP address data missing due to incomplete backend schema — impacts connection details.

Next Steps

• Collaborate on fixing IP address schema.
• Continue building the Topology Graph component.
• Enhance test coverage and validation around device-level data rendering.

[Abhi-MS]

GSoC Project – Week 6, 7 Update

Goals Achieved

Improved Type Safety & Code Clarity:

• Replaced all remaining any types with explicit TypeScript interfaces.
• Defined clear types for API responses and hook states.
• Improved inline comments to explain logic, especially around complex data processing and component props.

This work enhances readability, enables better autocompletion, and prevents runtime type errors, making the codebase easier to maintain and extend.

Documentation Site Enhancements:

• Migrated styles and layout to match the modern frontend aesthetic.

• Made the Docusaurus site fully responsive for mobile and tablet views.

Screen.Recording.2025-07-20.121202.mp4

• Added support for frontend auto-generation of docs using typedoc with typedoc-plugin-markdown, ensuring that code comments in the frontend are reflected in the docs automatically.

Network Topology Visualization Enhancements:

• Hover to reveal metadata: Nodes now show system name, host name, description, and uptime on hover.

• Included LLDP links alongside CDP to visualize all possible connections. If a link appears twice (via CDP and LLDP), it’s still shown with protocol-specific labeling.

• Color-coded edges: Different colors indicate whether a connection was discovered via CDP or LLDP.
• Directional arrows: Hovering on edges now displays an arrow to indicate which device the port belongs to.
• Support for out-of-zone neighbors: Neighboring devices not defined in the current zone are displayed in grey for easy distinction.

• Selective visibility: Node selection highlights the node and its edges.

• Interactive graph behavior: Click-to-focus interaction improves scrollability and UX, especially in large topologies.

• Reset button: Clears all graph interactions (search, zoom, selection, pan) in one click.

• Export feature: Allows exporting the current graph view as a PNG image.
  Example exported PNG image:
  <img width="400"" alt="topology (5)" src="https://github.com/user-attachments/assets/253b7d42-0b52-471f-bed3-3b21555d824c" />

• Dark mode styling: Manually applied theme-aware styles (using isDark) to support dark/light modes, since vis-network does not update automatically.

• Enhanced theming: Improved colors for nodes and edges across themes, including hover, search highlights, and selection states.

• Optimized data fetching: Moved API call to parent component to avoid redundant fetches and improve performance.

Connection Details Table Update:

• Updated the connection details table to show CDP/LLDP data in the format device name + connection name for clearer context.

Utility Refactor:

• Moved the uptime conversion logic into a utility function, improving code reuse and reducing duplication across components.
• Also moved the logic for trimming system descriptions into a separate utility function for better maintainability and consistency across the UI.

Key Learnings

• CDP and LLDP often report the same physical connection separately, so deduplication is critical for accurate UI.
• One port = one link, even if it shows up in both protocols.

Screen.Recording.2025-07-20.122759.mp4

• The remote port information is reported by both protocols and should be interpreted carefully when drawing connections.
• CDP is usually the default on Cisco; LLDP is broader but may be disabled unless explicitly enabled.
• vis-network does not dynamically respond to theme changes, since it renders the graph as a static JavaScript canvas. Theme changes (like dark/light mode) must be manually handled using a flag (e.g., isDark) to update styling before rendering the graph.

Challenges

• The reset functionality for the topology chart is non-trivial; vis-network doesn’t provide a single built-in reset method, so all interactions like zoom, pan, selection, and search have to be manually reset via multiple method calls.

Next Steps

• Finish development of the network topology visualization, including final refinements and integration.
• Start implementing CPU, memory usage, and uptime graphs for devices.
• Begin writing and expanding tests for new components and utilities.

[Abhi-MS]

GSoC Project – Week 8, 9 Update

Goals Achieved

Network Topology Visualization Improvements

• Form-based Device Search
  Replaced instant onChange-based device search with a structured form submission approach for better control and UX.

<form
            className="flex items-center gap-4 topology-search-form"
            onSubmit={(e) => {
              e.preventDefault();
              setSearchTerm(inputTerm);
              setInputTerm("");
            }}
          >
            <input
              className="border p-2 rounded w-full topology-search-input"
              type="text"
              placeholder="Search device..."
              value={inputTerm}
              onChange={(e) => {
                const value = e.target.value;
                setInputTerm(value);
                if (value.trim() === "") {
                  setSuggestions([]);
                  return;
                }
                const filtered = allNodeLabels
                  .filter((label) =>
                    label.toLowerCase().includes(value.toLowerCase())
                  )
                  .slice(0, 5);
                setSuggestions(filtered);
              }}
            />
            <button className="border-2 text-button rounded px-4 py-2 cursor-pointer transition-colors duration-300 align-middle h-fit topology-search-btn">
              Search
            </button>
          </form>

• Search Suggestions
  Implemented autocomplete suggestions for devices in the current zone as well as discovered devices.

• Click Interactions

  • Single-click to select a node.
  • Double-click navigates to the device details page.

switchmap.pr.3.2.mp4

• Reset Behavior Refactor

  • Updated reset logic to restore initial state instead of using hardcoded values.
  • Reset also clears zoom, selected edges, and nodes.

switchmap.pr.3.1.mp4

• Custom Tooltip Styling

Added new styles to make tooltips consistent across light/dark modes.

• Removed Duplicate Link Logic
  Deduplication logic was revised—duplicate CDP and LLDP edges are now filtered more effectively.

• Tooltip DOM Cleanup

Memory Leak Fix: When rebuilding the vis-network graph (e.g., zone change), HTML elements in tooltips were not being cleaned up, leading to memory bloat. Before rendering the new graph, DOM elements in node.title and edge.title are now properly removed:

 initialGraph.current?.nodes?.forEach((node) => {
    if (
      node.title instanceof HTMLElement &&
      typeof node.title.remove === "function"
    ) {
      node.title.remove();
    }
  });

• Improved Device Status Logic

Replaced the basic uptime check with a stricter condition to ensure accurate online/offline status. Now, a device is marked as "🟢" (up) only if sysUptime is a valid number and greater than zero:

<div style="font-size: 2em;">
        ${
          typeof device.sysUptime === "number" && device.sysUptime > 0
            ? "🟢"
            : "🔴"
        }
      </div>

Code Migration & Structure Finalization

• Feature Migration: Merged isolated feature work from a temporary repo (used during WSL compatibility issues) back into the main repo.

• Preserved Context: Manually compared files with switchmap/frontend, retaining useful inline comments and minor logic differences.

• Refactored Directory Structure:

  • components/ → src/app/components/
  • utils/ → src/app/utils/
  • types/ → src/app/types/

Device Details Chart Component

• Device Overview Tab

  • Embedded the existing Topology component, scoped to the selected device, to show nearby connections.

  • Displayed a device metadata table with key fields (e.g., hostname, description, etc.).

  • Added three device-level charts using the reusable component:

    • Uptime
    • CPU Usage
    • Memory Usage

  • All charts currently use mock data to enable UI development and layout refinement. Historical metrics are not yet collected or stored in the backend. This setup allows frontend progress to continue while backend infrastructure is being planned.

  • Future-Proofing: The same component can render CPU and memory metrics by changing props (title, unit, data).

Next Steps

• Update the poller to capture device-level time-series metrics.
• Modify the schema to store historical data in a new table.
• Expose new API endpoints to retrieve and serve chart data dynamically.
• Plan on how to visualize device movement in the network over time.

[Abhi-MS]

GSoC Project – Week 10, 11 Update

Goals Achieved

1. Device Details Page – Backend & Frontend Integration

Backend Metrics Integration (Cisco Devices)

• Added Cisco-specific OIDs for CPU and memory utilization.

  • CPU (CISCO-PROCESS-MIB): .1.3.6.1.4.1.9.9.109.1.1.1.1.10

  • Memory (CISCO-MEMORY-POOL-MIB):

    • Used: .1.3.6.1.4.1.9.9.48.1.1.1.5
    • Free: .1.3.6.1.4.1.9.9.48.1.1.1.6

• Added a new system() method in mib_ciscoc2900.py to fetch and return these values.

Data Flow: Device → Poller → YAML → DB

• Poller collects metrics via SNMP → produces enriched YAML output.
• YAML processed into DB objects (DeviceMetricsHistory).
• Each poll inserts a new row (no updates, preserving history).

Database & Models

• Added smap_device_metrics_history table to store historical metrics.

  • Columns: hostname, timestamp, uptime, cpu_utilization, memory_utilization.

• Added insert logic in metrics.py to store collected metrics into smap_device_metrics_history.

GraphQL Integration

• Extended schema to expose new metrics (cpuUtilization, memoryUtilization, uptime).
• Queries return historical time-series data.
• Note: hostname filter (allDeviceMetrics(filter: {...})) not working yet — part of next steps.

Frontend Updates

• Replaced mock chart data with live Cisco metrics via GraphQL queries.
• Built charts using LineChartWrapper for consistency (uptime, CPU, memory).
• Verified formatting, responsiveness, and tooltip/Y-axis alignment.

---

2. History Page

History.page.mp4

Data Fetching & Preparation

• Updated GraphQL query to fetch devices nested under zones.
• Flattened zones and devices client-side to associate each device with its zone.
• Added automatic selection of the first device on initial load.
• Updated useEffect to fetch devices and apply time-range filters.
• Conditional fetch for custom date ranges only when both start and end dates are set.
• Flattened zones and devices for chart data preparation.

Charts & LineChartWrapper

• Built reusable LineChartWrapper for all line charts.

  • Supports multiple lines, custom Y-axis (tickFormatter, width), X-axis formatting, title, and height.
  • Added optional tooltipFormatter to match Y-axis labels (e.g., zone names, sysNames).

• Implemented two charts:

  • Device SysName history (step line chart).
  • Device Zone history (step line chart).

• Fixed tooltips to show correct labels using formatter instead of raw values.

• Confirmed Y-axis tickFormatter and tooltip consistency.

• Applied ResponsiveContainer for dynamic width/height.

• Identified potential issue with too many points (squeezed horizontally).

Search & Autocomplete

• Implemented autocomplete for device hostname search.
• Fixed dropdown positioning and width to match the input.
• Ensured suggestions overlay does not disrupt layout on small screens.

Date Range & Filtering

• Added dropdown for quick-select ranges: 1d, 1w, 1m, 6m, custom.
• Inline custom date inputs for clarity.
• Corrected dropdown arrow rotation and positioning.

Responsiveness & Layout

History.page.2.mp4

• Made history page responsive.

• Added left margin to content to avoid overlapping with hamburger menu.

• Chart container scrollable + flex-1 to occupy remaining screen height.

• Sidebar shrinking fixed with flex-shrink-0.

• Tailwind breakpoints: sm → md → lg → xl → 2xl.

• Adjusted layouts:

  • flex-col vs flex-row for different screen sizes.
  • justify-start instead of misused items-start / items-end.
  • xl:justify-between for large screens.

• Fixed alignment issues for suggestions list, search bar, and dropdown elements.

• Applied absolute + z-50 to dropdowns and suggestion lists to prevent layout shifts.

---

4. Topology Chart Bug Fixes

• Updated zone fetching to pull from latest event → dropdown shows proper zone names.

query: `  
               {
      events(last: 1) {
        edges {
          node {
            zones {
              edges {
                node {
                  id
                  idxZone
                  name
                }
              }
            }
          }
        }
      }
    }
            `

---

Next Steps

1. Device Details Page (Backend & Integration)

• Fix GraphQL filter by hostname support.

• Extend OID polling + schema updates for:

  • Generic devices
  • Juniper devices

• Add chart time range filters

• Improve query for optimized performance

---

2. History Page

• Handle large datasets: horizontal scroll, aggregation, or <Brush> zoom.
• Consider wrapping/truncating long Y-axis labels.
• Fix graph display issues on small screens.
• Improve query for optimized performance

---

[Abhi-MS]

GSoC Project – Week 12, 13 Update

Goals Achieved

1. Topology Chart

• Updated double-click handler to navigate only if idxDevice is valid, preventing errors when clicking CDP/LDP neighbor nodes.
• Memoized TopologyChart with useMemo to reduce unnecessary re-renders.

2. Device Details Page

• Added OIDs for generic and Juniper devices (CPU, memory).
• Created JuniperDeviceQuery for device-level metrics.
• Rebased and merged history page + device details into a single branch.
• Updated uptime graph to show device status instead of uptime.
• Preserved the active tab state on page refresh.
• Added time-range filter with restriction on custom range (max 180 days).

• Updated GraphQL schema with a simplified query→ fetches CPU, memory, uptime, lastPolled for a specific device.:

graphql
{
  deviceMetrics(hostname: "162.249.37.219") {
    edges {
      node {
        hostname
        uptime
        cpuUtilization
        memoryUtilization
        lastPolled
      }
    }
  }
}

• Fixed hostname filtering issue (VARBINARY) by encoding to bytes.
• Updated frontend queries & useEffect to fetch metrics only for the selected hostname.
• Made Device Details fully responsive.

switchmap.sept.1.mp4

• Migrated timestamp → lastPolled (BIGINT) in DB and updated backend/frontend accordingly.
• Fixed metadata table to display correctly formatted last polled time.
• Optimized rendering: memoized metadata table and device overview (re-render only on data change).

3. History Page

• Rebased with device details and integrated into same branch.
• Made fully responsive.

switchmap.sept.1-1.mp4

4. GraphQL & Database

• Simplified schema by removing duplicate queries (all_device_metrics, etc.).
• Ensured get_queries(layer) automatically includes Juniper device queries.
• Confirmed aggregator fetches metrics seamlessly for new queries.
  (Testing with Juniper device is pending)

5. Frontend Performance Improvements

• Added dependency arrays for memoized components.
• Verified time range changes now only re-render charts/dropdowns (not topology/metadata).

6. Vitest Setup & Testing

• Installed and configured Vitest with React Testing Library and JSDOM.

• Added vite.config.ts for testing (globals, jsdom, coverage).

• Created vitest.setup.ts for global imports (@testing-library/jest-dom).

• Added scripts in package.json:

  • npm run test → run once
  • npm run test:watch → interactive UI
  • npm run test:coverage → coverage reports

• Wrote first component tests:

  • DeviceDetails.spec.tsx
  • HistoricalChart.spec.tsx
  • LineChartWrapper.spec.tsx
  • ZoneDropdown.spec.tsx

Next Steps

• Extend testing to cover the full frontend.
• Start working on Device Connection Charts page.

[Abhi-MS]

GSoC Project – Week 14 & 15 Update

Goals Achieved

1. Device Details & History

• Made Device Details page fully responsive.
• Migrated timestamp → last_polled (BIGINT) in smap_device_metrics_history.
• Updated backend to store & serve lastPolled instead of timestamp.
• Adjusted GraphQL schema & queries to use lastPolled.
• Updated frontend (DeviceDetails, HistoricalChart) to convert UNIX lastPolled → ISO strings.
• Fixed chart data mapping: converted uptime to numeric, handled empty/NaN values.
• Ensured metadata table shows correctly formatted last polled time.
• Debugged sysUptime issues (undefined values) → confirmed correct data usage.

2. UI & Accessibility Improvements

• Wrapped date inputs in <label> containers for accessibility.

• Placed labels above inputs with proper spacing (mb-1).

• Used flex flex-col lg:flex-row gap-2 items-center →

  • Vertical stacking on small screens.
  • Horizontal alignment on larger screens.
  • Better accessibility + support for getByLabelText testing.

3. PostCSS & Tailwind Setup

• Configured PostCSS + Tailwind with ES modules (postcss.config.mjs).
• Removed manual autoprefixer (handled by Tailwind).
• Documented .mjs vs .cjs usage depending on module type.
• Fixed Tailwind/PostCSS issues during build.

4. Testing Progress

• Added tests for Device Details page and Topology graph.
• Wrote tests for all major components: Sidebar, ZoneDropdown, TopologyChart, DevicesOverview, DeviceDetails, ConnectionDetails, HistoricalChart, LineChartWrapper, and pages.
• Created utility tests: stringUtils.ts, time.ts, timeStamp.ts.
• Confirmed 100% coverage for utils, layout, theme toggle, mocks.
• Added tests for conditional rendering, error states, and edge cases.
• Coverage improved to 84%+ overall, with high-priority components targeted (TopologyChart, DeviceDetails, ZoneDropdown).

5. PR & New Features

• Opened PR for history page and device history charts.
• Addressed PR feedback.
• Built connection chart component
• Enhanced styles + added pagination to connection chart.
• Made connection chart component fully responsive
• Query used:

const QUERY = (hostname: string) => `
{
  devices(hostname: "${hostname}") {
    edges {
      node {
        id
        hostname
        sysName
        lastPolled
        l1interfaces {
          edges {
            node {
              ifname
              ifspeed
            }
          }
        }
      }
    }
  }
}
`;

Connection.Charts.mp4

---

Next Steps

• Extend test coverage as close to 100% as possible with focus on conditional rendering & error states.
• Add more tests for:
  • TopologyChart (dynamic devices, error handling).
  • DeviceDetails (metadata, ports, charts edge cases).
  • DevicesOverview, ZoneDropdown, History/page.tsx.
• Finalize connection chart integration.
• Continue frontend optimization & performance improvements.

[Abhi-MS]

GSoC Project – Week 16 & 17 Update

Goals Achieved :

1. Implemented new configuration page

• Zones Management

  • Add, edit, expand/collapse, and delete zones.
  • Device hostname management within each zone (inline editing + cleanup).

• SNMP Groups Management

  • Add new groups with default settings.
  • Expand/collapse per-group details.
  • Inline editing of fields, including secure handling of password-type values.
  • Delete groups with proper reindexing of state.

• Advanced Section

  • Editable core and server sections using collapsible panels.
  • Secure password editing flow (masked fields + prompt verification).

• General Improvements

  • Loading/saving states with success feedback.
  • Reusable update functions for cleaner state management.
  • API integration with fallback to localhost if env variable is not set.
  • Consistent UI components and transitions for better UX.

Configuration.Page.UI.1.mp4

2. Improved test coverage for frontend: >90%

Next steps:

• Improving the UI and optimize the frontend
• Address small bugs
• Integrating the frontend with the new backend

[Abhi-MS]

GSoC Project – Week 18–20 Update

Goals Achieved

Week.18-20.-.1.mp4

Week.18-20.-.2.mp4

Week.18-20.-.3.mp4

Week.18-20.-.4.mp4

Frontend-Backend Integration

• Completed integration of the new Next.js frontend with the new GraphQL backend API.
• Verified all queries work correctly with the new components.
• Ensured seamless navigation between pages: Dashboard → Device Details, Dashboard → History, and Dashboard → Config.
• Updated queries and state management to handle dynamic device and zone data.

UI & UX Improvements

• Finalized light mode UI, polishing colors, spacing, and component alignment.
• Refined dark mode implementation using next-themes for consistency and accessibility.
• Improved loading indicators and skeleton screens for a smoother user experience.
• Standardized error messages and fallbacks across all pages.
• Ensured uniform component transitions for better visual feedback.

Responsiveness

• Ensured responsiveness across mobile, tablet, and desktop screens for all major pages and components.
• Adjusted layout of top-level pages, tables, charts, and dashboards to handle different screen sizes.

Week.18-20.-.7.mp4

Week.18-20.-.8.mp4

Week.18-20.-.9.mp4

Performance Optimizations

• Lazy loading: Split heavy components (TopologyChart, DeviceDetails, ConnectionCharts) using React.lazy() to reduce initial bundle size.
• Caching: Implemented in-memory caching with a 5-minute TTL (300 seconds) for device and hostname data, storing both filtered results and hostnames to minimize redundant API calls and re-computation of search suggestions. On the Device page, SWR is used for efficient data fetching and caching of device details.
• Request Management:
  • Debounced user inputs for search and filtering.
  • Cancelled in-flight requests using AbortController to avoid race conditions.
• Memoization: Applied React.memo and useMemo/useCallback to prevent unnecessary re-renders.
• Pagination: Optimized tables and interface lists for large datasets, rendering only visible slices.

Device & History Pages

• Ensured lazy-loaded charts and tables only render when needed.
• Centralized reusable logic for filtering, date validation, and error handling.
• Added debounced search suggestions for hostname.
• Improved tab switching performance with SWR caching and memoized components.

Config Page & Components

• In-memory caching of config data with a 2-minute TTL to reduce redundant API calls.
• Optimistic functional state updates for immediate UI feedback.
• Memoized zones, SNMP groups, and helper functions using useMemo and useCallback to minimize re-renders.
• Inline rendering of zone and SNMP group elements for simplicity.

Week.18-20.-.5.mp4

Week.18-20.-.6.mp4

Documentation & Code Quality

• Updated developer documentation to reflect the new Next.js frontend structure.
• Ensured the pre-commit hook is up to date and workflow still enforce test coverage.

Testing & Validation

• Maintained 96% frontend test coverage after integration and optimizations.
• Added tests for:
  • Conditional rendering
  • Edge cases and error states
  • Lazy-loaded and memoized components
• Verified full functionality of dashboards, charts, device details, history, and config pages.

Performance Impact

• Significant improvement in interaction speed on repeated actions due to caching and memoization.
• Sub-second initial load for heavy pages with lazy loading.
• Reduced redundant network calls and CPU-heavy re-renders.
• Smooth UX even with large datasets in tables, charts, and topology graphs.