GSoC 2025 Final Blog Post

Wrapping up a summer of deep dives into codebases, late-night refactoring, and those “aha!” moments that make it all worthwhile. Here’s my final reflection on migrating KomMonitor from its trusty but aging AngularJS roots to a sleek, modern Angular setup. When I first started, I felt like I was stepping into a well-loved old house: full of character, but with creaky floors and outdated wiring that begged for an upgrade. Thanks to my mentors Christoph Wagner, Sebastian Drost, and the supportive 52°North community, what could have been an overwhelming renovation turned into a smooth transformation. The result? KomMonitor looks the same from the outside, but inside, it’s stronger, more flexible, has some new interior changes and is ready for whatever comes next! Let’s break down how we got here, what changed under the hood, and where it might go from here.

A Quick Look at the Project

KomMonitor, 52°North’s open-source platform for monitoring and visualizing geospatial indicators, has been a powerhouse for years, thanks in large part to its original AngularJS foundation. That old code did an incredible job shaping what KomMonitor is today. As tech evolves, so do the challenges: unsupported libraries at its core, a rigid architecture lacking modularity, and hurdles for newcomers trying to contribute. Key services, such as the data exchange, grid helper, and import helper were especially tough to maintain or extend.

My project tackled this by migrating select components to Angular with TypeScript, creating a hybrid system where the old and new coexist seamlessly. This “lean migration” approach (see my midterm post) lets us upgrade piece by piece without breaking anything. For users, the UI styling and interactions feel identical. But for developers, it’s a game-changer. There is better type safety through interfaces for those intricate data structures, a fresh way to inject and consume services, and encapsulated versions of core helpers tailored to each component.

What We Achieved: Hitting the Goals

We set out not just to port code, but to make KomMonitor future-proof while keeping disruptions to a minimum. Here’s how it played out:

• Core Migration Success: I rewrote key admin components in Angular, matching the original look and feel pixel-for-pixel. This included encapsulating services like data exchange, import helper, and grid helper into TypeScript-powered versions, injected directly into components and placing them inside the components name folder for better isolation and testing. For example, all the services that are used in spatial unit components are placed inside app/services/adminSpatialUnit/. The hybrid setup means we can migrate one part at a time, running old and new side-by-side.

• Library Upgrades with Smart Fallbacks: A big chunk of the work involved swapping deprecated AngularJS dependencies for Angular-friendly ones. For instance, I integrated CodeMirror for robust code editing and NgbModal for handling modals, ensuring minimal tweaks to the backend. Take the icon picker as a prime example: It used to rely on jQuery and Bootstrap Glyphicons. After brainstorming with my mentors, we pivoted to Font Awesome and used ngx-icon-picker for its long-term support and modern features. We couldn’t leave legacy data hanging, so we built a fallback mechanism to render old Bootstrap icons in existing records. Now everything transitions smoothly without data loss or extra user hassle.

• Boosting Modularity and Reusability: To cut down on repetition and make future updates easier, I crafted new custom elements in a dedicated folder with upgraded supported libraries and got rid of deprecated ones: a color picker, date picker, line picker, and icon picker. These are modular building blocks that reduce code duplication (no more copying the same date logic across files) and set a pattern for anyone adding new features.

• Expanding Reach with Internationalization: Drawing from mentor feedback, I wove in support for non-German speakers, opening KomMonitor to a wider global audience. For this to happen, we created a new language service that uses angular internationalizing i18n guidelines. This enhances usability without overcomplicating the interface – think seamless language toggles that make geospatial analysis accessible to more folks worldwide.

Overall, we met our goals of preserving the user experience while revamping the developer side. The real win, however; is a codebase that’s now inviting the vast community of Angular contributors.

Let the Code speak for itself

Here’s a rundown of the key pull requests made via Github to KomMonitor’s Web Client:

1. Add multi language support(i18n) to Kommonitor and Language Dropdown [PR#85]:
   To add multi-language support to Kommonitor, we used ngx-translate. This library provides a simple and efficient way to manage translations in Angular applications. All translations are stored in separate JSON files, with one file for each supported language. These files are placed inside the app/assets/i18n/ directory, making it easy to organize and extend language support as needed. A robust fallback strategy ensures reliability: the system prefers a saved language, then the browser language, and finally defaults to German (de). Missing translation keys fall back to German or, if unavailable, display the raw key, ensuring the application remains user-friendly even with incomplete translation files.
2. Login Screen (Hover Dialog Box) Component [PR#84]:
   The Login Screen has been refactored into a standalone component. Previously split between the User and Admin Interfaces, it is now modular and consistent, making the codebase easier to maintain and extend.
3. Admin Dashboard Component [PR#75]:
   The Admin Dashboard Component now uses a responsive flex-wrap layout for better mobile chart display. Pie chart colors have been updated to match the design system (#337ab7 for indicators and #ff851b for georesources). All original functionality, including broadcast event handling and AdminLTE box widget initialization, is preserved.
4. AdminConfig (App & Control) and AdminRoleExplanation [PR#74]:
   We replaced Google Code Prettify with CodeMirror v5 across all editors, removing legacy dependencies and aligning with Controls Config. In Admin Role Explanation, accordion states are now independent and logic was moved into the component class for cleaner maintainability.
5. AdminTopicManagement, EditTopicModal, DeleteTopicModal [PR#73]:
   We replaced jQuery/Bootstrap modals with Angular’s NgbModal service, improving type safety, error handling, and state management. In addition, I converted AngularJS controllers to Angular components with proper inputs/outputs and lifecycle hooks. I updated services to use Angular’s DI with HttpClient and BroadcastService, removing legacy jQuery dependencies and $scope usage.
6. Toast Service and Notifier component [PR#68]:
   We introduced a new Toast Helper Service (Angular replacement for kommonitorToastHelperService) and a Notifier component (gsoc-demo-component). The component integrates with the service to display toast messages, includes UI controls (title, text area, alignment, submit), and is accessible via the left sidebar. Configuration updates were considered in config-storage-server.json, with a fallback in controls-config_backup.json.
7. Spatial Unit Component and Services (Edit Metadata Modal, Edit Feature Modal, User Role Modal, Add Modal, Delete Modal) [PR#80]:
   I integrated ag-grid-angular for data grids and refactored modular UI components (Line, Colour, Date Picker). I also added TypeScript interfaces for cleaner service integration under the Lean migration approach.  To improve modals, I added input/data retention across steps and unified success/failure alerts to match the old AngularJS behavior.
8. Indicator Unit Component and Services (Edit Metadata Modal, Edit Feature Modal, User Role Modal, Add Modal, Delete Modal) [PR#86]:
   We applied the same improvements as the Spatial Unit: ag-grid-angular, modular UI components, TypeScript interfaces, data retention across modal steps, and consistent alerts. Additionally, jQuery replaced drag-and-drop (which relied on direct DOM manipulation) with @angular/cdk/drag-drop for managing indicator ordering (Indikatoren-Reihenfolge) in the Themenkatalog.
9. Georessource Unit Component and Services: (Edit Metadata Modal, Edit Feature Modal, User Role Modal, Add Modal, Delete Modal) [PR#87]:
   I introduced a custom icon picker that is built on top of ngx-icon-picker with a fallback to support legacy Bootstrap’s Glyphicon icons while transitioning to Font Awesome. I also applied the same improvements as the Spatial Unit (ag-grid-angular, modular UI, TypeScript interfaces, and improved modal handling) and removed jQuery dependencies, replacing them with long-supported Angular libraries for better maintainability.
10. Group Management, Script Management, and Script Execution Component [PR#88]:
    I refactored for improved consistency and maintainability in line with the broader Angular migration effort.

For the full codebase, check out the migrate repo: https://github.com/KomMonitor/web-client/tree/feature/migration

Reflecting on the Big Picture

This project was more than a tech upgrade – it was like a behind-the-scenes upgrade ensuring a seamless transformation. Users see the same reliable tool for geospatial insights, but everything they interact with has subtly evolved: safer, more modular, and built to last. I learned that great migrations are about thoughtful balance – honoring the past (shoutout to the original AngularJS code), embracing robust tools for the future, and always prioritizing a frictionless experience. Working with 52°North was a highly professional experience. Contributing to a geospatial software project aligned with my commitment to building technology that creates real-world environmental impact. Along the way, I honed skills in TypeScript’s type magic, fallback strategies for real-world compatibility, and collaborative problem-solving.

Auf Wiedersehen & Looking Forward

The foundation is set, but the story doesn’t end here. This work opens doors for expanding the migration to untouched areas, such as integrating more advanced geospatial features or even AI-assisted data analysis. Imagine building on these modular patterns to add new pickers or deepen internationalization with full multi-language dashboards. I’d love for the community to jump in – fork the repo, test the hybrids, or suggest tweaks. Personally, I’m buzzing to carry these lessons into my next adventures, maybe even circling back to contribute more to KomMonitor. Huge thanks to my mentors and the 52°North crew for making this summer unforgettable!